angular-bootstrap-slider get value as string

Question

Using angular-bootstrap-slider based on bootstrap-slider.

I'm trying to get the value of a color by name (string), based my work on previous questions such as Here where there is a nice example of the options available.

Let's say I have two color options, Red & Blue, the user picks one, I want to save it as 'blue'.

I created a working example on Plunker, and added the code below

All I manage to get is the tick value if I use a number object.

Script:

$scope.colorTypes = [0,1];

$scope.colorLabels = ['Red','Blue'];

$scope.colorTypeSlider = {
    ticks: $scope.colorTypes,
    ticks_labels: $scope.colorLabels,
    ticks_snap_bounds: 50
};
$scope.colorTypeVal = '';

HTML:

 <slider ng-model="colorTypeVal" ticks="colorTypeSlider.ticks"
                        ticks-labels="colorTypeSlider.ticks_labels"
                        ticks-snap-bounds="colorTypeSlider.ticks_snap_bounds"></slider>
                <h6> value check is: {{colorTypeVal}} </h6>

Bennett Adams · Accepted Answer · 2016-01-14 15:48:59Z

0

I got what you were looking for working in this plunker, but there's definitely some weird behavior with the slider. I could only get it working by using the onStartSlide attribute within the directive to trigger a callback to select the color.

<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>

And I couldn't pass the $scope.colors array (of objects) to the function for some reason, it only worked with a an array of strings. Anyway, here's the function I used:

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

And I passed in the $scope.colorTypeSlider.ticks_labels as the collection.

Hope this helps you...

edited Jan 14, 2016 at 15:48

answered Jan 13, 2016 at 17:52

Bennett Adams

1,81815 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alon Rosenfeld Over a year ago

Thanks for that @BennetAdams, I appreciate the time and effort.

Alon Rosenfeld Over a year ago

Need to solve the issue of now working only when sliding (onSlide), since clicking which is more natural gesture of the user, and now does not catch, tried to use 'change' but didn't call it correctly .

Bennett Adams Over a year ago

I think you can use the on-start-slide event attribute for the callback. I'll edit the plunker accordingly.

Collectives™ on Stack Overflow

angular-bootstrap-slider get value as string

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related