Databases
StackOverflow2013
Postsdbo
POChanging the color of a jquery ui slider as you slide it
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChanging the color of a jquery ui slider as you slide it
    text
    copied!<p>I've been looking around for an answer on how to do this and I can't seem to figure it out (even looking at the jquery ui themeing documentation). As I move the slider from left to right, I want the section on the left side of the slider-knob to change to orange (instead of the default grey).</p> <p>The jquery theme-roll generated the css below. Presumably the .ui-widget-header background-color would control this, but it does't seem to. Neither does adding a background color to any other class. Any idea how I fix this so that as you slide horizontally you get a different color?</p> <p>JQUERY: </p> <pre><code> $(document).ready(function(){ $("#tasks_time").slider({ value: 1, min: 0, max: 72, step: 1, slide: function() { update(); } }); $("#tasks_done").slider({ value: 5, min: 0, max: 1000, step: 10, slide: function() { update(); } }); </code></pre> <p>HTML:</p> <pre><code> Finish these items in &lt;span id="curr-tasks_time" class="calc_number"&gt;1&lt;/span&gt; hours &lt;div id="tasks_time"&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; } .ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0;} </code></pre> <p>Here's <a href="http://jsfiddle.net/EAaLK/" rel="noreferrer">an example</a></p> <p>Thanks in advance for your help!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload