javascriptangularjsbootstrap-slider

How to get selected value on ng-click of button in Angular bootstrap-slider?


I have a scenario, in that I have to get the selected value of Bootstrap range slider on button click. Actually I have format() function in that I am getting the selected value in console. But I have to get that value on button click.

HTML:

 <slider ng-model="ctrl.value" ng-min="0" ng-disabled="ctrl.chk"
  ng-max="3" step="1" value="ctrl.value" ticks="ctrl.sliderTicks()" 
  formatter="ctrl.myFormatter" tooltip="always"></slider>

<button type="button" class="btn btn-primary" ng-click="myFunc(ctrl.value)">save</button>

JS:

$scope.myFunc = function(value){
console.log(value);
}

this.myFormatter = function (value) {
    console.log('value %s', value);
    return value;
}

Solution

  • As the ng-model of your slider is set to ng-model="slider.value", this is this variable you are looking for in your button.

    Change:

    <button ... ng-click="myFunc(ctrl.value)">save</button>
    

    To:

    <button ... ng-click="myFunc(slider.value)">save</button>