jquery UIスライダをスライドさせて色を変更する

Question

私はこれを行う方法を探していましたが、私はそれを理解することができませんでした（jquery UIテーマのドキュメントを見ても）。スライダを左から右に動かすと、スライダノブの左側のセクションがオレンジ（デフォルトのグレイの代わりに）に変わります。

jquery theme-rollが下のCSSを生成しました。おそらく、.ui-widget-headerの背景色がこれを制御するでしょうが、そうではありません。他のクラスに背景色を追加することもありません。どのように私はこれを修正する任意のアイデアは、水平方向にスライドすると、別の色を得る？

の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;} 

ここにあなたの助けを事前にan example

おかげです！もしあれば、ボーナスとして

.ui-widget-content { background: purple; } 

：

Answer 1

THERは

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

Answer 2

はこれを試してみてください......例

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

とjqueryのコードです小さなドラッグハンドルの色を変更したい場合は、次のようにしてください：

.ui-widget-content .ui-state-default { background: chartreuse; } 

Answer 3

アラムの答えは私のためには機能しませんでした。また、jsfiddleのデモは、それが想定していたことをしていないようです。 ここでは動作するより高度なバージョンで、複数の色が含まれています。

あなたはそれをいじると、あなたが好きなように多くの色との組み合わせを設定することができます。

HTML：

<p>A Colored jQuery UI Slider</p> 
<div id="coloredSlider"></div> 

CSS：

body { 
    font-family: Arial, Helvetica, sans-serif; 
} 
#coloredSlider { 
    float: left; 
    clear: left; 
width: 600px; 
    margin: 15px; 
} 
#coloredSlider .ui-slider-range { 
    background: #ff0000; 
} 

#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default { 
    background: none; 
    background-color: #FFF; 
} 

Javascriptを：

function getTheColor(colorVal) { 
    var theColor = ""; 
    if (colorVal < 50) { 
       myRed = 255; 
       myGreen = parseInt(((colorVal * 2) * 255)/100); 
      } 
     else { 
       myRed = parseInt(((100 - colorVal) * 2) * 255/100); 
       myGreen = 255; 
      } 
     theColor = "rgb(" + myRed + "," + myGreen + ",0)"; 
    return(theColor); 
} 

function refreshSwatch() { 
    var coloredSlider = $("#coloredSlider").slider("value"), 
    myColor = getTheColor(coloredSlider); 

    $("#coloredSlider .ui-slider-range").css("background-color", myColor); 

    $("#coloredSlider .ui-state-default, .ui-widget-content .ui-state-default").css("background-color", myColor); 
} 

$(function() { 
     $("#coloredSlider").slider({ 
      orientation: "horizontal", 
      range: "min", 
      max: 100, 
      value: 0, 
      slide: refreshSwatch, 
      change: refreshSwatch 
     }); 
}); 

DEMO：http://codepen.io/anon/pen/obWzaQ

Answer 4

$(function() { 
 
    $("#slider").slider({ 
 
     min: 0, 
 
     max: 100, 
 
     slide: function(event, ui) { 
 
       \t \t $("#slider").css('background', 'linear-gradient(90deg, #c75f04 \t \t             '+ui.value+'%, #cccccc 0%)'); 
 
        $("#price").val("$" + ui.value); 
 
       } 
 
    }); 
 
      
 
});

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
 
     rel = "stylesheet"> 
 
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 

 
<div id = "slider"></div><br> 
 
Price : <input id="price">