滑动时更改jQuery UI滑块的颜色

  • Z时代
  • 2024-01-10
  • 分类：问答

我一直在寻找有关如何执行此操作的答案，但似乎无法弄清楚（甚至在查看jQuery

UI主题文档时也是如此）。当我从左向右移动滑块时，我希望滑块旋钮左侧的部分变为橙色（而不是默认的灰色）。

jQuery主题卷生成了以下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;}

这是一个例子

在此先感谢您的帮助！

回答：

这是一个例子

和一个jQuery代码…

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

以上是 滑动时更改jQuery UI滑块的颜色 的全部内容， 来源链接： utcz.com/qa/403518.html

回到顶部