CODEWITHSUNDEEP
jquerycsscolorsslider
Gary
Gary

Reputation: 395

Edit the CSS for a Slider from JQuery

I have some sliders on my webpage, and I want to change the color of one of the sliders, but only the section that is selected (e.g. Slider has range 0 to 100, and the button is on 25, I only want 0-25 to be red).

My slider uses the following in .html file:

<label for="slider-main">Main Slider: </label>
<input type="range" name="slider-main" id="slider-main" value="25" min="0" max="100" data-highlight="true"/>

The rule for when it should change color to red is below:

<script>
if (slider-main-value-one>slider-main-max)
{
$("#slider-main").css("background","red");
}
else
{
$("#slider-main").css("background","");
}
})
</script>

This only changes the background of the label, not the slider

Using firebug and messing around I found the element I need to change to change the actual slider color;

ui-slider-bg ui-btn-active ui-btn-corner-all

The problem is, I have no idea how to call this in JQuery.

In firebug, when the label changes color, this is what is happens;

<div class="ui-slider">    
<input id="slider-main" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset ui-slider-input" type="number" data-type="range" data-highlight="true" max="100" min="0" value="25" name="slider-main" style="background: none repeat scroll 0% 0% red;">

Manually editing firebug to change the color of the slider itself is the following;

<div class="ui-slider-track ui-btn-down-a ui-btn-corner-all" role="application">
<div class="ui-slider-bg ui-btn-active ui-btn-corner-all" style="width: 28%; background: red"></div>

This is directly below the code where the label changes color.

So all in all, the question is, how can I call the class "ui-slider-bg ui-btn-active ui-btn-corner-all" from my .js (or from .html using ?

Thank you!

Kind Regards,

Gary

Upvotes: 0

Views: 906

Answers (1)

dislick
dislick

Reputation: 677

You can access the element with this selector in jQuery:

$('.ui-slider-bg.ui-btn-active.ui-btn-corner-all')

Or you could use CSS (same selector obviously):

.ui-slider-bg.ui-btn-active.ui-btn-corner-all {
    /* styles */
}

Edit: Here is the working code:

$("#slider-main, #first-slider .ui-slider-bg.ui-btn-active.ui-btn-corner-all").css("background", "red");

Running in JSFiddle.

Upvotes: 0

Related Questions