jquery - jQuery slider 幻灯片上的默认灰色背景

Question

我已经实现了 jQuery slider 功能，当我滑动它时，它不会用默认的灰色背景填充 slider 。 调试 slider 后，我发现我的实现中缺少以下 HTML 片段。请注意，比较是与 jQuery 站点上的 jQuery 示例进行的。

<div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div>

下面是实现 slider 的上下文。

Javascript

$("#slider-range-min").slider({ range: "min", step: 100, //on slider-stop functionality stop: function(event, ui) { //code goes here }, //on slide functionality slide: function(event, ui) { //code goes here } });

HTML

           <div class="txtcenter">
                <div id="slider-range-min"></div>
            </div>

问题:

1. 这个 HTML 是由 jQuery slider 库动态生成的吗？
2. 对其工作原理的解释。

我示例的输出

<div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 38.5714%;"></a></div>

不包含自动生成的 div 类，即使范围:“min”已指定。

以下链接可将幻灯片功能中的默认灰色背景替换为橙色背景。

changing the color of a jquery ui slider as you slide it !

Answer 1

之前:页面加载时

function load() { $("#slider-range-min").slider({ range: "min", disabled: true, }); }

function user_action() { $("#slider-range-min").slider({ disabled: true, }); }

之后:在用户操作触发时

function load() { $("#slider-range-min").slider({ range: "min", disabled: true, }); }

function user_action() { $("#slider-range-min").slider({ range: "min", disabled: false, }); }