[2019/04/20] version: 1.0

• 发布

1.基本示例

$('#demo1').XSlider({
	min:0,
	max:10,
	value:5
});

//或者
new XSlider({
	el: '#demo1',
	min:0,
	max:10,
	value:5
});

2.垂直显示示例

设置 direction 为 vertical 就是垂直显示模式

$('#demo2').XSlider({
	min:0,
	max:10,
	value:5,
	isVertical: true, //horizontal|vertical
});

3.支持设置小数步长示例

设置 step 属性为小数，就变成小数步长

$('#demo3').XSlider({
	min:0,
	max:10,
	value:5,
	step:0.5,
	onChange(val){
		console.log(val);
	}
});

4.提示框设置示例

支持设置提示框的方向、模板、偏移量

$('#demo4').XSlider({
	min:0,
	max:10,
	value:5,
	tooltip: true, //是否显示tooltip, 默认true显示
	tooltipOffset: 15, //提示框偏移量
	tooltipDirection: 'bottom', //可选值 top|right|bottom|left 水平滚动条默认top，垂直滚动条默认right
	tooltipFormat: function(val){
		return 'Val: <span style="color:red">' + val + '</span>';
	}
});

5.滑块设置示例

滑块设置包括：对拖拽滑块大小的设置、是否自动滚动到位置的设置

$('#demo5-1').XSlider({
	min: 1,
	max: 3,
	value: 1,
	handleAutoSize: true, //自动计算滑块大小
	autoScroll: true, //是否自动滚动到位置
	autoScrollDelayTime: 800, //自动滚动延迟时间，默认250ms
});

$('#demo5-2').XSlider({
	min: 1,
	max: 3,
	value: 1,
	handleAutoSize: false, //自动计算滑块大小
	autoScroll: false, //是否自动滚动到位置
});

6.用户样式设置

通过设置 className 属性，给插件设置用户样式。目前插件中默有 mobile 移动端样式。

$('#demo6-1').XSlider({
	min: 1,
	max: 3,
	value: 1,
	className: 'mobile',
	handleWrapperSideStart: 2,
	handleWrapperSideEnd: 2,
	handleAutoSize: true
});

$('#demo6-2').XSlider({
	min: 1,
	max: 3,
	value: 1,
	handleWidth: 36,
	handleHeight: 36,
	className: 'mobile',
	bgSideStart: 18,
	bgSideEnd: 18,
	handleAutoSize: false
});

7.获取、设置值

通过设置 className 属性，给插件设置用户样式。目前插件中默有 mobile 移动端样式。

let slider7 = $('#demo7').XSlider({
	min: 1,
	max: 3,
	value: 1,
	handleWrapperSideStart: 2,
	handleWrapperSideEnd: 2,
	className: 'mobile',
	handleAutoSize: false,
});

slider7.setOptions({value: 2}); //设置 value: 2
slider7.setOptions({handleAutoSize: true}); //设置 handleAutoSize: true
slider7.getValue(); //获得value