angularjs-slider icon indicating copy to clipboard operation
angularjs-slider copied to clipboard

Style bar outside minLimit/maxLimit bounds

Open bodinaren opened this issue 8 years ago • 3 comments

Check out the example "Range slider with min limit set to 10 and max limit set to 90" from the example pages.

It would be very neat if we were able to style the part of the bar that is outside the given bounds (e.g. 0-10 and 91-100) in a different style so we could clearly show this part of the bar is not available.

bodinaren avatar Feb 14 '17 14:02 bodinaren

Today it's not possible to do it via the library, but you can use a short workaround via CSS gradient background:

background: linear-gradient(to right, #c60600 0%,#c60600 10%,#d8e0f3 10%,#d8e0f3 90%,#c60600 90%,#c60600 100%)

Demo: http://jsfiddle.net/q3a27bne/

ValentinH avatar Feb 14 '17 18:02 ValentinH

Sure thing. It gets slightly more complicated with dynamic limits though, but I can absolutely still do it by just querying the DOM. This was meant as a feature request, sorry if this is not the correct forum for it.

bodinaren avatar Feb 15 '17 15:02 bodinaren

No it's the right place to submit features request! I was just providing a workaround for now. If you want to provide a pull request adding this feature, you are welcome. :)

ValentinH avatar Feb 15 '17 16:02 ValentinH