滑块条 - AuxUI - 模块化前端UI框架

滑动型输入器，展示当前值和可选范围，当用户需要在数值区间/自定义区间内进行选择时使用

默认

<div id="slider1" data-toggle="slider"></div>

<script type="text/javascript">
auxui(['slider'], function (){
    $( "#slider1" ).slider();
}); 
</script>

范围滑块

<div id="slider2" data-toggle="slider"></div>
<div id="amount" data-toggle="slider"></div>

<script type="text/javascript">
auxui(['slider'], function (){
    $( "#slider2" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
            $( "#amount" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
}); 
</script>

自定义手柄

<div id="slider3" data-toggle="slider">
    <div id="custom-handle" class="ui-slider-handle"></div>
</div>

<script type="text/javascript">
auxui(['slider'], function (){
    var handle = $( "#custom-handle" );
    $( "#slider3" ).slider({
        create: function() {
            handle.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle.text( ui.value );
        }
    });
}); 
</script>

多个滑块

88 77 55 33 40 45 70

<div id="master" style="width:260px; margin:15px;"></div>
<div id="eq">
    <span style="height: 120px;display:inline-block;margin-right: 10px;">88</span>
    <span style="height: 120px;display:inline-block;margin-right: 10px;">77</span>
    <span style="height: 120px;display:inline-block;margin-right: 10px;">55</span>
    <span style="height: 120px;display:inline-block;margin-right: 10px;">33</span>
    <span style="height: 120px;display:inline-block;margin-right: 10px;">40</span>
    <span style="height: 120px;display:inline-block;margin-right: 10px;">45</span>
    <span style="height: 120px;display:inline-block;margin-right: 10px;">70</span>
</div>

<script type="text/javascript">
auxui(['slider'], function (){
    $( "#master" ).slider({
        value: 60,
        orientation: "horizontal",
        range: "min",
        animate: true
    });

    $( "#eq > span" ).each(function() {
        var value = parseInt( $( this ).text(), 10 );
        $( this ).empty().slider({
            value: value,
            range: "min",
            animate: true,
            orientation: "vertical"
        });
    });
}); 
</script>

最大固定范围

<div id="slider4" data-toggle="slider"></div>
<div id="amount1"></div>

<script type="text/javascript">
auxui(['slider'], function (){

    $( "#slider4" ).slider({
        range: "max",
        min: 1,
        max: 5,
        value: 2,
        slide: function( event, ui ) {
            $( "#amount1" ).html( ui.value );
        }
    });
}); 
</script>

最小固定范围

<div id="slider5" data-toggle="slider"></div>
<div id="amount2"></div>

<script type="text/javascript">
auxui(['slider'], function (){

    $( "#slider5" ).slider({
        range: "min",
        value: 37,
        min: 1,
        max: 700,
        slide: function( event, ui ) {
            $( "#amount2" ).html( "$" + ui.value );
        }
    });
}); 
</script>

滑块绑定选择

<form id="reservation">
    <label for="minbeds">切换</label>
    <select name="minbeds" id="minbeds">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
    </select>
</form>
<div id="slider6" data-toggle="slider"></div>

<script type="text/javascript">
auxui(['slider'], function (){

    var select = $( "#minbeds" );
    var slider = $( "<div id='slider6'></div>" ).insertAfter( select ).slider({
        min: 1,
        max: 6,
        range: "min",
        value: select[ 0 ].selectedIndex + 1,
        slide: function( event, ui ) {
            select[ 0 ].selectedIndex = ui.value - 1;
        }
    });
    $( "#minbeds" ).on( "change", function() {
        slider.slider( "value", this.selectedIndex + 1 );
    });
}); 
</script>

增量

<div id="slider7" data-toggle="slider"></div>
<div id="amount3"></div>

<script type="text/javascript">
auxui(['slider'], function (){

    $( "#slider7" ).slider({
        value:100,
        min: 0,
        max: 500,
        step: 50,
        slide: function( event, ui ) {
            $( "#amount3" ).html( "$" + ui.value );
        }
    });

}); 
</script>

垂直滑块

<div id="slider8" data-toggle="slider"></div>

<script type="text/javascript">
auxui(['slider'], function (){

    $( "#slider8" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            console.log(ui);
        }
    });

    $( "#slider9" ).slider({
        orientation: "vertical",
        range: true,
        values: [ 17, 67 ],
        slide: function( event, ui ) {
            $( "#amount4" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    
}); 
</script>

垂直范围

<div id="slider9" data-toggle="slider"></div>
<div id="amount4"></div>

<script type="text/javascript">
auxui(['slider'], function (){

    $( "#slider9" ).slider({
        orientation: "vertical",
        range: true,
        values: [ 17, 67 ],
        slide: function( event, ui ) {
            $( "#amount4" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    
}); 
</script>

选项

名称	类型	描述	默认值
animate	Boolean/String/Number	`Boolean：`设置true为时，句柄将使用默认持续时间设置动画 `String :`速度的名称，例如"fast"或"slow" `Number：`动画的持续时间，以毫秒为单位	false
classes	Object	指定要添加到元素的其他类	{ "ui-slider": "ui-corner-all", "ui-slider-handle": "ui-corner-all", "ui-slider-range": "ui-corner-all ui-widget-header" }
disabled	Boolean	如果设置为true，则禁用滑块	false
max	Number	滑块条最大值	100
min	String	滑块条最小值	0
orientation	Number	确定滑块手柄是否水平移动（左边的最小值，右边的最大值）或垂直（底部的最小值，顶部的最大值）。可能的值："horizontal"，"vertical"。	"horizontal"
range	Boolean/String	滑块是否表示范围，支持多种类型： `Boolean：`如果设置为true，滑块将检测您是否有两个手柄，并在这两个手柄之间创建一个可设置样式的范围元素。 `String：`"min"或者是"max"。最小范围从滑块min到一个手柄。最大范围从一个手柄到最大滑块。	false
step	Number	确定滑块在最小值和最大值之间的每个间隔或步长的大小或数量。滑块的完整指定值范围（max - min）应该可以被步长整除	1
value	Number	如果只有一个手柄，则确定滑块的值。如果有多个句柄，则确定第一个句柄的值	0
values	Array	此选项可用于指定多个句柄。如果range选项设置为true，则长度values应为2	null

初始化后获取或设置选项示例：

//获取
var values = $( ".selector" ).slider( "option", "values" );
//设置
$( ".selector" ).slider( "option", "max", 150 );

方法

名称	描述	示例
.destroy()	完全删除滑块功能。这将使元素返回到pre-init状态	$( ".selector" ).slider( "destroy" );
.disable()	禁用滑块	$( ".selector" ).slider( "disable" );
.enable()	启用滑块	$( ".selector" ).slider( "enable" );
.instance()	检索滑块的实例对象。如果元素没有关联的实例，undefined则返回。与其他方法不同，instance()在滑块插件加载后调用任何元素是安全的	$( ".selector" ).slider( "instance" );
.option(optionName)	获取当前与指定关联的值optionName	var isDisabled = $( ".selector" ).slider( "option", "disabled" );
.option()	获取一个对象，该对象包含表示当前滑块选项哈希的键/值对	var options = $( ".selector" ).slider( "option" );
.option（optionName，value）	设置与指定关联的滑块选项的值optionName	$( ".selector" ).slider( "option", "disabled", true );
.option（options）	为滑块设置一个或多个选项	$( ".selector" ).slider( "option", { disabled: true } );
.value()	获取滑块的值	var selection = $( ".selector" ).slider( "value" );
.value（value）	设置滑块的值	$( ".selector" ).slider( "value", 55 );
.values()	获取所有句柄的值	var values = $( ".selector" ).slider( "values" );
.values(index)	获取指定句柄的值	var value = $( ".selector" ).slider( "values", 0 );
.values(index, value)	设置指定句柄的值	$( ".selector" ).slider( "values", 0, 55 );
.values(values)	设置指定句柄的值	$( ".selector" ).slider( "values", [ 55, 105 ] );
.widget()	返回jQuery包含滑块的对象	var widget = $( ".selector" ).slider( "widget" );

事件

名称	描述
change（event，ui）	用户滑动手柄后触发，如果值已更改; 或者如果通过该value方法以编程方式更改该值
create（event，ui）	创建滑块时触发
slide（event，ui）	滑动期间每次鼠标移动时触发。事件中提供ui.value的值表示句柄将由于当前移动而具有的值。取消事件将阻止句柄移动，句柄将继续具有其先前的值
start（event，ui）	开始滑动时触发
stop（event，ui）	滑动手柄后触发

事件示例：

$( ".selector" ).slider({
    stop: function( event, ui ) {
        console.log(event, ui);
    }
});