जब आप इसे स्लाइड करते हैं तो jquery ui स्लाइडर का रंग बदलना

Question

मैं यह कैसे करना है इसके बारे में उत्तर देने के लिए चारों ओर देख रहा हूं और मुझे यह पता लगाना प्रतीत नहीं होता है (यहां तक ​​कि jquery ui थीमिंग दस्तावेज़ भी देख रहा है)। जैसे ही मैं स्लाइडर को बाएं से दाएं स्थानांतरित करता हूं, मैं स्लाइडर-नोब के बाईं तरफ सेक्शन को नारंगी में बदलना चाहता हूं (डिफ़ॉल्ट ग्रे के बजाय)।

jquery थीम-रोल नीचे सीएसएस उत्पन्न किया। संभवतः .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> 

सीएसएस:

.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

धन्यवाद है!

Answer 1

वहाँ एक उदाहरण

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

और एक jQuery कोड है ......

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

Answer 2

इस प्रयास करें:

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

एक बोनस के रूप में, यदि आप छोटे ड्रैग हैंडल का रंग बदलना चाहते हैं, इसका उपयोग करें:

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

Answer 3

अराम का जवाब मेरे लिए काम नहीं करता था। इसके अलावा jsfiddle डेमो ऐसा नहीं लगता है जो इसे माना जाता है। यहां एक और उन्नत संस्करण है जो काम करता है, और इसमें कई रंग शामिल हैं।

आप इसके साथ बेला और के रूप में कई रंग और संयोजन आप चाहें के रूप में स्थापित कर सकते हैं:

HTML:

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

सीएसएस:

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

जावास्क्रिप्ट:

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

डेमो: 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">