JQuery UI Slider Style (Left & Right)
The jQuery UI slider provides access to the class ui-slider-range
to execute custom css in the selected range. Is there an easy way to add a custom css (in my case the background color) to what's left and to the right of the selected range?
Changing the background color of the slider changes both left and right, however I want the trio effect to be essentially three separate background colors for the three separated areas created by the min / max range selectors;
source to share
You can use jQuery to add style property background-image
to your .ui-slider
. You will need to calculate the position of the sliders as a percentage.
For example check CSS
.ui-slider {
background-image: -webkit-linear-gradient(left, red 50%, blue 50%);
}
Your jQuery will update the style for that particular slider whenever the user moves the slider. Check out jsFiddle .
var myMin = 0, myMax = 500;
$("#slider-range").slider({
range: true,
min: myMin,
max: myMax,
values: [75, 300],
slide: function (event, ui) {
// Update amount text
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
// Update left/right color
var left = 100 * (ui.values[0] - myMin) / (myMax - myMin);
var right = 100 * (ui.values[1] - myMin) / (myMax - myMin);
$(this).css('background-image', '-webkit-linear-gradient(left, red ' + left + '%, blue ' + right + '%)');
}
});
Please note, you will need to find a way to initially paint the left / right side. Also, there are several browser specific properties background-image
, see this answer .
source to share