angular-bootstrap-slider default value / two-way binding

Question

Using angular-bootstrap-slider based on bootstrap-slider. This extends a previous question regarding get value as string

I want to set the shown value when the page is loaded to be any other value than the first one.

Let's say I want 'blue' to be shown and not 'red'

How do I set a value that will be returned from another $scope.

Or perhaps how do I set the default value of the slider?

I have a working Plunker example and code below

script:

  $scope.colors = [{'id': 0,'label': 'red'},{'id': 1,'label': 'blue'},{'id': 2,'label': 'green'}];

  function getAttrs(collection, attr) {
    var attrArray = [];
    angular.forEach(collection, function(item) {
      attrArray.push(item[attr]);
    }) 
    return attrArray;
  }

$scope.colorTypeSlider = {
    ticks: getAttrs($scope.colors, 'id'), // [0,1,3]
    ticks_labels: getAttrs($scope.colors, 'label'), // ['red', 'blue','green']
    ticks_snap_bounds: 50,
};

$scope.selectedColor = '';

$scope.selectColor = function ($event,value,collection) {
  console.log('value is ' + value);
  $scope.selectedColor = collection[value];
};

html:

 <slider ng-model="colors" 
        ticks="colorTypeSlider.ticks"
        ticks-labels="colorTypeSlider.ticks_labels"
        ticks-snap-bounds="colorTypeSlider.ticks_snap_bounds" 
        on-start-slide="selectColor($event,value,colorTypeSlider.ticks_labels)"></slider>
                <h6> value check is: {{selectedColor}} </h6>

sarin · Accepted Answer · 2016-05-26 09:03:48Z

I had a dig into the code and noticed that the Slider for Bootstrap (bootstrap-slider.js) uses the attribute "value" to set its initial values. See here for examples. Then in the angular-bootstrap-slider (slider.js) which this sits on, passes in two attributes "ngModel" and "value". The initSlider() function then does some decision making and messes around with the ngModel value incorrectly I believe. I found that if I ignore the "ngModel" and just rely on the "value" attribute I could default the initial value of the slider.

<span slider range="true" 
      precision="0" 
      scale="'logarithmic'" 
      ng-model="ngModel" 
      value="ngModel" 
      min="minValue" 
      step="1000" 
      max="maxValue"
      on-stop-slide="setValue()" 
      slider-tooltip="hide">
</span>

So in my case above (from my directive containing the slider) you can see I have set the directives ngModel the both the sliders ng-model (which I don't care about anymore) and also the value (which seems to work). ng-model is required by angular-bootstrap-slider so I had to provide it but it doesn't seem to hurt setting the value to the same attribute.

Collectives™ on Stack Overflow

angular-bootstrap-slider default value / two-way binding

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related