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>

Answer 1

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