Ion.RangeSlider 2.0.3

Question

I am trying to use Ion.RangeSlider 2.0.3

URL : http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html

So, I want to change this slider with three colors. Left, Middle, Right. I attached this image to understand what I need.

Therefore, I need your help to configure this slider.

Thanks.

Answer 1

I did a similar thing. Below are the related segments of CSS and javascript code to achieve it. Say I want the left side to be green, middle yellow and right red, then

CSS

.irs-line-left { background: #66b032; width: 60%; } .irs-line-mid { background: #FFBF00; } .irs-line-mid:before { content: ''; background-color: #FF0000; position: absolute; left: 54%; top: 0; right: 0; bottom: 0; } .budget-page .irs-line-right { background: #FF0000; width: 40%; } .budget-page .irs-line-mid { width: 0 !important; } .irs-bar { background: #FFBF00; } 

Now here is the trick. When you change two points, we need to change the width of the left and right sides to dynamically change the color width.

Javascript section.

 var iri_line_left = $(".irs-line-left"); var iri_line_right = $(".irs-line-right"); $("#color-slider").ionRangeSlider({ type: "double", min: 0, max: 100, from: 60, to: 80, grid: true, onChange: function (data) { var leftWidth = Math.ceil(data.from_percent); var rightWidth = 100 - leftWidth; // set left side width iri_line_left.css({ 'width': leftWidth + "%" }); // set right side width iri_line_right.css({ 'width': rightWidth + "%" }); } }); 

Hope this helps you.

Answer 2

may be good

 .irs-line { // needs latest Compass, add '@import "compass"' to your scss @include background-image(linear-gradient(left, #32ff6c 0%,#28ff57 33%,#207cca 33%,#2989d8 66%,#ff3030 66%,#ff0000 100%)); }