Thay đổi màu của thanh trượt jquery ui khi bạn trượt nó

Question

Tôi đã tìm kiếm câu trả lời về cách thực hiện điều này và dường như tôi không thể tìm ra (thậm chí xem tài liệu về chủ đề jquery ui). Khi tôi di chuyển thanh trượt từ trái sang phải, tôi muốn phần ở bên trái thanh trượt để thay đổi thành màu cam (thay vì màu xám mặc định).

Chủ đề jquery tạo ra css bên dưới. Có lẽ màu nền -ui-widget-header sẽ kiểm soát được điều này, nhưng nó dường như không. Không thêm màu nền cho bất kỳ lớp nào khác. Bất kỳ ý tưởng làm thế nào tôi sửa lỗi này để khi bạn trượt theo chiều ngang bạn sẽ có được một màu sắc khác nhau?

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

Dưới đây là an example

Cảm ơn trước sự giúp đỡ của bạn!

Answer 1

ther là một ví dụ

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

và mã jquery ......

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

Answer 2

Hãy thử điều này:

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

Như một phần thưởng, nếu bạn muốn thay đổi màu sắc của tay cầm kéo nhỏ, hãy sử dụng điều này:

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

Answer 3

Câu trả lời của Aram không phù hợp với tôi. Ngoài ra bản demo jsfiddle dường như không làm những gì nó được cho là. Đây là phiên bản nâng cao hơn hoạt động và bao gồm nhiều màu.

Bạn có thể fiddle với nó và thiết lập như nhiều màu sắc và kết hợp như bạn muốn:

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

Các 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">