Showing posts with label angular slider. Show all posts
Showing posts with label angular slider. Show all posts
Slider directive for AngularJS

Slider directive for AngularJS

May 14, 2017

angular-slider


Slider directive for AngularJS. https://venturocket.github.io/angular-slider
License: MIT

Features


  • Single or dual knob
  • Fully Stylable
  • Custom arbitrary scaling
  • Adjustable knob "Stickiness"
  • Adjustable minimum range width
  • Draggable selection range
  • Full touch event support
  • Known Issues


  • When hidden during initialization display: none; the slider might not display correctly when shown. Issue $scope.$broadcast('refreshSlider'); in a parent scope to tell the slider to update the DOM.
  • The step attribute conflicts with angular-foundation's step directive docs. To remedy this, use step-width instead (it's an alias of step. step will be deprecated in the next minor release, so if you want to do a bit of future proofing you can start using step-width now and save yourself a bit of migration work later.

    Installation


     bower install venturocket-angular-slider  
    

    Usage


    Requirements

    Add following scripts to your html files for angular, angular-touch and angular-slider:
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>  
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>  
     <script src="build/angular-slider.min.js"></script>  
    
    And add vr.directives.slider as a dependency for your app:
     angular.module('myApp', ['vr.directives.slider', ...]);  
    
    NOTE: in IE10/11 an annoying tooltip will show up unless you add the following css:
     ::-ms-tooltip {  
          display: none;  
     }  
    

    Single Knob

    Markup

    As an element:
     <slider  
       ng-model="{expression}"  
       floor="{float}"  
       ceiling="{float}"  
       step="{float}"  
       precision="{integer}"  
       stretch="{integer}"  
       translate-fn="{expression}"  
       scale-fn="{expression}"  
       inverse-scale-fn="{expression}">  
     </slider>  
    
    As an attribute:
     <div  
       slider  
       ng-model="{expression}"  
       floor="{float}"  
       ceiling="{float}"  
       step="{float}"  
       precision="{integer}"  
       stretch="{integer}"  
       translate-fn="{expression}"  
       scale-fn="{expression}"  
       inverse-scale-fn="{expression}">  
     </div>  
    

    Parameters

    Param Type Required Default Details
    ng-model expression Yes none Assignable angular expression to which to data-bind the value.
    floor float Yes none The lowest value possible
    ceiling expression Yes float The highest value possible
    step expression No inf The width between each tick.
    precision integer No 0 The numerical precision to which to round the value.
    translate-fn expression No none A translation function to apply to all view values. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()")
    scale-fn expression No none A scaling function to apply to the value. See the Scaling section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()")
    inverse-scale-fn expression No none The inverse of the scaling function. This is required if a scaling function is specified. See the Scaling section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()")

    Dual Knob

    Markup

    As an element:
     <slider  
       ng-model="{expression}"  
       ng-model-range="{expression}"  
       floor="{float}"  
       ceiling="{float}"  
       buffer="{float}"  
       step="{float}"  
       precision="{integer}"  
       stretch="{integer}"  
       translate-fn="{expression}"  
       translate-range-fn="{expression}"  
       translate-combined-fn="{expression}"  
       scale-fn="{expression}"  
       inverse-scale-fn="{expression}">  
     </slider>  
    
    As an attribute:
     <div  
       slider  
       ng-model="{expression}"  
       ng-model-range="{expression}"  
       floor="{float}"  
       ceiling="{float}"  
       buffer="{float}"  
       step="{float}"  
       precision="{integer}"  
       stretch="{integer}"  
       translate-fn="{expression}"  
       translate-range-fn="{expression}"  
       translate-combined-fn="{expression}"  
       scale-fn="{expression}"  
       inverse-scale-fn="{expression}">  
     </div>  
    

    Parameters

    Param Type Required Default Details
    ng-model expression Yes none Assignable angular expression to which to data-bind the low value.
    ng-model-range expression Yes none Assignable angular expression to which to data-bind the high value.
    floor float Yes none The lowest value possible
    ceiling float Yes float The highest value possible
    buffer float No 0 The minimum difference between the low and high values
    step float No inf The width between each tick.
    precision integer No 0 The numerical precision to which to round the value.
    stretch float No 3 How sticky the knobs will act. 1 = no stickiness
    translate-fn expression No none A translation function to apply to all view values. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()")
    translate-range-fn expression No none A translation function to apply to the range value. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()")
    translate-combined-fn expression No none A translation function to apply to the combined value (when the knobs are too close together). Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()")
    scale-fn expression No none A scaling function to apply to the value. See the Scaling section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()")
    inverse-scale-fn expression No none The inverse of the scaling function. This is required if a scaling function is specified. See the Scaling section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()")

    Scaling


    You can supply any arbitrary scaling function (and its inverse) to the slider to suit your needs. The inverse scaling function MUST be specified if a scaling function is specified (and vice versa). The scaling/inverse function can be pretty much anything as long as they take a number as a parameter and return a number. Like this:
     function scaleFn(value) {  
       return Math.pow(value,3);  
     }  
     function inverseScaleFn(value) {  
          var sign = (value == 0) ? 1 : (value/Math.abs(value));  
       return sign * Math.pow(Math.abs(value),1/3);  
     }  
    

    A few notes:
  • scaleFn(inverseScaleFn(x)) MUST produce x or you're gonna have a bad time
  • If your scale function returns the same y for multiple x's within the range of the slider you're gonna have a bad time
  • If the floor of your slider dips into negative numbers and you don't account for possible imaginary numbers you're gonna have a bad time
  • Additional Features


  • ngChange support (docs)
  • ngDisabled support (docs)
  • implements ngModelController for form validation and dirty/pristine states (docs)
  • Development


    Run npm install, then bower install and then npm run dev for continuously running the tests in PhantomJS whilst developing.

    Note: Special thanks to Venturocket, Inc.

    Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer.