CODEWITHSUNDEEP
javascriptangularjs
Tapan Bavaliya
Tapan Bavaliya

Reputation: 155

how to call function when slider stops in angular-rangeslider

i am using slider https://github.com/danielcrisp/angular-rangeslider

my question is that how to call controller function when slider stops for example

<div range-slider min="0" max="100" model-min="min" model-max="max"></div>

so how to bind event in this slider when slider stops ?

i find something like this

scopeOptions = {
                    disabled: '=?',
                    min: '=',
                    max: '=',
                    modelMin: '=?',
                    modelMax: '=?',
                    onHandleDown: '&', // calls optional function when handle is grabbed
                    onHandleUp: '&', // calls optional function when handle is released
                    orientation: '@', // options: horizontal | vertical | vertical left | vertical right
                    step: '@',
                    decimalPlaces: '@',
                    filter: '@',
                    filterOptions: '@',
                    showValues: '@',
                    pinHandle: '@',
                    preventEqualMinMax: '@',
                    attachHandleValues: '@'
                };

Upvotes: 2

Views: 1824

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

you have the options as your question, and there you can find something called onHandleUp and it's described as calls optional function when handle is released. so if you pass a function to this option then that function will call when slider stops.

for ex:

add on-handle-up option,

<div range-slider min="0" max="100" model-min="demo1.min" model-max="demo1.max" on-handle-up="sliderStops()"></div>

create the sliderStops() function in controller,

 $scope.sliderStops = function() {
  alert("slider stops.");
}

here is the Demo Plunker

If you need to call a function when slider starts use onHandleDown option, as same as onHandleUp.

<div range-slider min="0" max="100" model-min="demo1.min" model-max="demo1.max" on-handle-up="sliderStops()" on-handle-down="sliderStats()"></div>

$scope.sliderStats = function() {
    console.log("slider starts.");
}

here is the Demo Plunker. Open the console and slide and check the console outputs.

Upvotes: 2

Related Questions