search

Wildhoney / ngRangeSlider

Multi-handle range slider utilising the native HTML5 input range elements.
http://ng-range-slider.herokuapp.com/
MIT License
55 stars 11 forks source link

Add colors attribute #10

Open Jonathancollinet opened 8 years ago

Jonathancollinet commented 8 years ago

Hi,

It will be great if we can update colors of range with a new attribute colors like:

<section data-range-slider="range" class="range-slider" data-colors="colors" step="1" ng-model="range" min="0" max="100"></section>

where colors = [ color1, color2, color3 ]

It actually work if you add the new attribute and add ng-style on second input range:

ng-style="{\'background\': \'linear-gradient(to right, \'+ _colors[0] +\' 0%, \'+ _colors[0] +\' \' + _model[0] + \'%, \'+ _colors[1] +\' \' + _model[0] + \'%, \'+ _colors[1] +\' \' + _model[1] + \'%, \'+ _colors[2] +\' \' + _model[1] + \'%)\'}"

And the result is:

rangeslidercolor

I don't think that is the best way to do this, but you've got the idea.

Wildhoney commented 8 years ago

Why is it a dumb question? It's actually a very clever idea, and would be happy to add it.

Jonathancollinet commented 8 years ago

All right, sorry for the quick edit.

It actually works if we have a range 0-100, and i think we can adjust the value with a simple mathematics calcul like cross multiplication.

I re-update the first comment.