jQueryUI Slider - 获取初始滑块值答案

【问题标题】：jQueryUI Slider - Getting the initial slider valuesjQueryUI Slider - 获取初始滑块值
【发布时间】：2011-11-04 02:56:36
【问题描述】：

我实现了 jQueryUI 滑块并希望在 2 个不同的 div 中显示最小和最大滑块值。 div 中的值将随着用户调整滑块而更新。 div 也会显示滑块的初始值。

问题： div 将[object object] 显示为初始值，但在用户调整滑块时显示正确的更新值。我需要一些帮助来显示初始值。

jQuery 代码：

$("#filter_submenu_rent").slider({
    range: true,
    min: 0,
    max: 10000,
    values: [ 75, 300 ],
    slide: function( event, ui ) {
        $( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
        $( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
    }
})
$( "#rent_min" ).html( "Min: $" + $( "#slider_rent" ).slider( "values", 0 ));
$( "#rent_max" ).html( "Max: $" + $( "#slider_rent" ).slider( "values", 1 ));

HTML 代码

<div id="filter_submenu_rent">
            <div id="rent_min"></div>
            <div id="slider_rent"></div>
            <div id="rent_max"></div>
</div>

jQuery 代码（另一种尝试） 最初使用时 2 个 div 中没有出现任何内容

$("#filter_submenu_rent").slider({
    range: true,
    min: 0,
    max: 10000,
    values: [ 75, 300 ],
    slide: function( event, ui ) {
        $( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
        $( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
    },
    create: function(event, ui) {
        $( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
        $( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
    }
})

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

我看到的主要问题是您有两个不同的对象作为滑块：

定义是$("#filter_submenu_rent").slider，但后面的代码是：$( "#slider_rent" ).slider

工作示例：http://jsfiddle.net/4tDjZ/1/

【讨论】：

【解决方案2】：

有些人可能会觉得这有点 hacky，但我发现您可以将自定义属性放入滑块选项对象中，然后像访问任何其他滑块选项一样访问它们。

$('#myslider').slider({min: 0, max: 10, value: 5, myinitval: 5});

// will remain 5, unless your event handlers change it
$('#myslider').slider('option', 'myinitval');

【讨论】：