6

我一直在寻找有关如何执行此操作的答案，但我似乎无法弄清楚（甚至查看 jquery ui 主题文档）。当我从左向右移动滑块时，我希望滑块旋钮左侧的部分变为橙色（而不是默认的灰色）。

jquery 主题卷生成了下面的 css。大概 .ui-widget-header background-color 会控制它，但似乎没有。也不会向任何其他类添加背景颜色。知道如何解决这个问题，以便在水平滑动时获得不同的颜色吗？

查询：

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

这是一个例子

在此先感谢您的帮助！

4

4 回答 4

16

有一个例子

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

和一个jquery代码......

          $( "#tasks_time" ).slider({
                range: "min",
                value: 37,
                min: 1,
                max: 700,
                slide: function() {
                    update();
                }
            });
于 2012-01-04T09:02:09.983 回答
5

亚兰的回答对我不起作用。此外，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
      });
});

演示：http ://codepen.io/anon/pen/obWzaQ

于 2016-01-08T06:16:49.360 回答
4 

 $(function() {
   $( "#slider" ).slider({
       min: 0,
       max: 100,
       slide: function( event, ui ) {
               		$("#slider").css('background', 'linear-gradient(90deg, #c75f04 		                                                   '+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">

于 2017-06-21T08:50:42.923 回答
2

试试这个：

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

作为奖励，如果您想更改小拖动手柄的颜色，请使用以下命令：

.ui-widget-content .ui-state-default { background: chartreuse; }
于 2013-12-24T07:18:44.220 回答