在滑动它时更改jquery ui滑块的颜色 [英] Changing the color of a jquery ui slider as you slide it

问题描述

我一直在寻找有关如何做到这一点的答案，我似乎无法想出来（甚至看看jquery ui主题文档）。当我从左向右移动滑块时，我想让滑块旋钮左侧的部分更改为橙色（而不是默认灰色）。

jquery主题卷生成下面的css。大概.ui-widget-header背景颜色会控制这个，但它似乎没有。也不向任何其他类添加背景颜色。任何想法如何解决这个问题，以便当你水平滑动你得到一个不同的颜色？

JQUERY：

  $（document）.ready（function（）{
 
 $（＃tasks_time）。slider（{
 value：1，
 min：0，
 max：72，
步骤：1，
幻灯片：function（）{
 update（）; 
} 
} ; 
 
 $（＃tasks_done）。slider（{
 value：5，
 min：0，
 max：1000，
步骤： 10，
幻灯片：function（）{
 update（）; 
} 
}）; 
   
 
 HTML：
 在< span id =curr-tasks_time class =calc_number> 1< / span>小时
 
< div id =tasks_time> 
< / div> 
  
 CSS：
  .ui- -content {border：1px solid #ccc;背景：＃ff9900 url（images / ui-bg_flat_100_ff9900_40x100.png）50％50％repeat-x;颜色：＃222222; } 
 .ui-widget-header {border：1px solid #aaaaaa;背景：＃797979 url（images / ui-bg_highlight-soft_75_797979_1x100.png）50％50％repeat-x;颜色：＃222222; font-weight：bold; } 
 
 .ui-slider {position：relative; text-align：left; } 
 .ui-slider .ui-slider-handle {position：absolute; z-index：2; width：1.2em;身高：1.2em; cursor：default; } 
 .ui-slider .ui-slider-range {position：absolute; z-index：1; font-size：.7em;显示：block; border：0; background-position：0 0; } 
 
 .ui-slider-horizo​​ntal {height：.8em; } 
 .ui-slider-horizo​​ntal .ui-slider-handle {top：-.3em; margin-left：-.6em; } 
 .ui-slider-horizo​​ntal .ui-slider-range {top：0;高度：100％; } 
 .ui-slider-horizo​​ntal .ui-slider-range-min {left：0; } 
 .ui-slider-horizo​​ntal .ui-slider-range-max {right：0;} 
  
 
 $ b b 
以下是示例 
 
 
 
感谢
 
  b     a href =http://jsfiddle.net/amkrtchyan/EAaLK/2/> http://jsfiddle.net/amkrtchyan/EAaLK/2/  
 
 
 
和一个jquery代码...... 
  $（#tasks_time）.slider（{
 range：min，
 value：37，
 min：1，
 max：700，
幻灯片：function（）{
 update 
} 
}）; 
  
 
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).

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?

JQUERY: 
    $(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();
            }
        });
HTML:
    Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours

    <div id="tasks_time">
    </div>
CSS:
.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;}
Here's an example

Thanks in advance for your help!
解决方案
ther is a example 

http://jsfiddle.net/amkrtchyan/EAaLK/2/

and a jquery code......
          $( "#tasks_time" ).slider({
                range: "min",
                value: 37,
                min: 1,
                max: 700,
                slide: function() {
                    update();
                }
            });


                        
这篇关于在滑动它时更改jquery ui滑块的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！