Question

我已经实现了jQuery滑块功能，当滑动它时，它没有填充默认灰色背景的滑块。在对firebug的滑块进行操作后，我发现在我的实现中缺少下面的HTML。要注意，比较是使用jQuery站点上的jQuery示例进行的。

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

以下是实现滑块的上下文。

的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>

问题：

这个HTML是由jQuery滑块库动态生成的吗？
对其运作的解释。

我的示例输出

<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（）{   $（＆＃34;＃滑块范围分钟＆＃34）滑块（{。                   范围：＆＃34; min＆＃34;，                   禁用：是的，               }）;   }

function user_action（）{              $（＆＃34;＃滑块范围分钟＆＃34）滑块（{。                   禁用：是的，               }）;   }

之后：关于用户操作触发器

function load（）{   $（＆＃34;＃滑块范围分钟＆＃34）滑块（{。                   范围：＆＃34; min＆＃34;，                   禁用：是的，               }）;   }

function user_action（）{              $（＆＃34;＃滑块范围分钟＆＃34）滑块（{。                   范围：＆＃34; min＆＃34;，                   禁用：false，               }）;   }

Answer 2

你可以尝试将他的信息放在你的css文件中（在底部）

.ui-widget-header {
background: #cccccc;
}

如果它不起作用，你可以试试这个:(没有提供）

.ui-widget-header {
background: #cccccc!important;
}

<强>的jQuery

我认为你必须设定te min，max值。你现在使用getter获取最小值。除此之外，你必须创建两个句柄，只有一个没有任何东西可以使用背景。

试试这个：

    $( "#slider-range-min" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {

        }
    });

请参阅小提琴：http://jsfiddle.net/ZTeKC/

Answer 3

根据你提供的Js和html，它不起作用。

“$（”＃slider-range-min“）。”slider“正在寻找一个id为”slider-range-min“的元素，你上面提供的html没有那个id。

是的，它会生成自己需要的html来为您提供滑块
这里解释了http://api.jqueryui.com/slider/

在jQuery滑块幻灯片上的默认灰色背景

3 个答案: