riot-slider

riot-slider示例

基本的riot-slider

滑动值:

最基本的用法

var s11 = document.querySelector('riot-slider-1-1');
var i11 = document.querySelector('.ipt-1-1');
new riotComponent.RiotSlider(s11,{
  step: 5,
  onChange: function(v){
		i11.value = v.join('-');
  },
	value: [10]
});

禁止滑动

滑动值:

设置disable为true禁止滑动

var s13 = document.querySelector('.riot-slider-1-3');
var i13 = document.querySelector('.ipt-1-3')
new riotComponent.RiotSlider(s13,{
	disabled: true,
	min: 10,
	max: 100,
	step: 10,
	showAllDots: true,
  showAllTips: true,
  onChange: function(v){
    i13.value = v.join('-')
  },
	value: [30]
});

是否只能展示不能滑动

control:

滑动值:

设置control为true禁止滑动

var s16 = document.querySelector('.riot-slider-1-6');
var i16 = document.querySelector('.ipt-1-6')
var sel16 = document.querySelector('.sel-1-6');
var slide16 = new riotComponent.RiotSlider(s16,{
	control: true,
	min: 10,
	max: 100,
	step: 10,
	showAllDots: true,
  showAllTips: true,
  onChange: function(v){
    i16.value = v.join('-')
  },
	value: [30]
});
sel16.onchange = function(){
  slide16.setControl(this.options.selectedIndex ? false : true);
}

设置step值

滑动值:

设置step值，并设置showAllDots与showAllTips显示刻度及提示

var s12 = document.querySelector('.riot-slider-1-2');
var i12 = document.querySelector('.ipt-1-2')
new riotComponent.RiotSlider(s12,{
	min: 10,
	max: 100,
	step: 10,
	showAllDots: true,
  showAllTips: true,
  onChange: function(v){
    i12.value = v.join('-')
  }
});

included=false表示值是并列关系

滑动值:

设置included=false值

var s14 = document.querySelector('.riot-slider-1-4');
var i14 = document.querySelector('.ipt-1-4')
new riotComponent.RiotSlider(s14,{
	included:false,
	min: 10,
	max: 100,
	step: 10,
	value: 20,
	showAllDots: true,
  showAllTips: true,
  onChange: function(v){
    i14.value = v.join(',')
  }
});

事件回调

onBeforeChange值:

onChange值:

onAfterChange值:

设置onBeforeChange/onChange/onAfterChange回调值

var s15 = document.querySelector('.riot-slider-1-5');
var i151 = document.querySelector('.ipt-1-5-1');
var i152 = document.querySelector('.ipt-1-5-2');
var i153 = document.querySelector('.ipt-1-5-3');
new riotComponent.RiotSlider(s15,{
	min: 10,
	max: 100,
	step: 10,
	value: 20,
	showAllDots: true,
  showAllTips: true,
  onChange: function(v){
    i152.value = v.join(',')
  },
	onBeforeChange: function(v){
		console.log(v);
		i151.value = v.join(',')
	},
	onAfterChange: function(v){
		i153.value = v.join(',')
	}
});

riot-slider为range

滑动值:

设置range为真，开启两个滑块

var s21 = document.querySelector('.riot-slider-2-1');
var i21 = document.querySelector('.ipt-2-1')
new riotComponent.RiotSlider(s21,{
	range: true,
	marks: {
    0 : '￥0',
		20: '￥150',
		40: '￥300',
		60: '￥450',
		80: '￥600',
		'-10': '测试',
    100: '￥100'
	},
	value:[20,60],
	min: 0,
	max: 100,
  onChange: function(v){
		var str;
		if(v[0] === v[1]){
			str = '￥' + v[0] * 7.5;
		}else{
			str = '￥' + v[0] * 7.5 + ' - ' + '￥' + v[1] * 7.5;
		}
		i21.value = str;
  }
});

riot-slide为range且只能滑到刻度上

滑动值:

设置range为真，开启两个滑块,设置dots为真，只允许滑到刻度上

var s22 = document.querySelector('.riot-slider-2-2');
var i22 = document.querySelector('.ipt-2-2');
new riotComponent.RiotSlider(s22,{
	dots: true,
	range: true,
	step: 5,
	marks: {
		0: '￥0',
		20: '￥150',
		40: '￥300',
		60: '￥450',
		80: '￥600',
		100: '￥100'
	},
  showAllDots: true,
  value: [20,60],
  min: 0,
  max: 100,
  onChange: function(v){
		var str;
		if(v[0] === v[1]){
			str = '￥' + v[0] * 7.5;
		}else{
			str = '￥' + v[0] * 7.5 + ' - ' + '￥' + v[1] * 7.5;
		}
		i22.value = str;
  }
});

riot-slider为range且个性化刻度显示

滑动值:

设置range为真，开启两个滑块,设置step=null且marks不为空，只允许滑到mark上,并通过设置mark的dot与tip个性化100的刻度与提示

var s24 = document.querySelector('.riot-slider-2-4');
var i24 = document.querySelector('.ipt-2-4')
new riotComponent.RiotSlider(s24,{
	range: true,
	marks: {
    0 : '',
		20: '￥150',
		40: '￥300',
		60: '￥450',
		80: '￥600',
		'-10': '测试',
    100: {
			label: '￥150',
			tip: false,
			dot: false
		}
	},
	value:[20,60],
	min: 0,
	max: 100,
  onChange: function(v){
		var str;
		if(v[0] === v[1]){
			str = '￥' + v[0] * 7.5;
		}else{
			str = '￥' + v[0] * 7.5 + ' - ' + '￥' + v[1] * 7.5;
		}
		i24.value = str;
  }
});

riot-slider为range且禁止两个滑块交叉滑动

滑动值:

range为真,设置allowCross=false禁止两个滑块交叉滑动

var s23 = document.querySelector('.riot-slider-2-3');
var i23 = document.querySelector('.ipt-2-3');
new riotComponent.RiotSlider(s23,{
	allowCross: false,
	range: true,
	value:[20,60],
	step: 10,
	min: 0,
	max: 100,
	showAllDots: true,
  showAllTips: true,
  dots: true,
  onChange: function(v){
		var str;
		if(v[0] === v[1]){
			str = '￥' + v[0] * 7.5;
		}else{
			str = '￥' + v[0] * 7.5 + ' - ' + '￥' + v[1] * 7.5;
		}
		i23.value = str;
  }
});

riot-slider为range且禁止两个值相等

滑动值:

range为真,设置rangeValueShouldEqual=false禁止两个值相等

var s25 = document.querySelector('.riot-slider-2-5');
var i25 = document.querySelector('.ipt-2-5');
new riotComponent.RiotSlider(s25,{
	rangeValueShouldEqual: false,
	range: true,
	value:[20,60],
	step: 10,
	min: 0,
	max: 100,
	showAllDots: true,
  showAllTips: true,
  dots: true,
  onChange: function(v){
		var str;
		console.log(v);
		if(v[0] === v[1]){
			str = '￥' + v[0] * 7.5;
		}else{
			str = '￥' + v[0] * 7.5 + ' - ' + '￥' + v[1] * 7.5;
		}
		i25.value = str;
  }
});

riot-slider为range且range的差值固定不变

滑动值:

range为真,设置rangeGapFixed=true固定range差值不变

var s26 = document.querySelector('.riot-slider-2-6');
var i26 = document.querySelector('.ipt-2-6');
var rs26 = new riotComponent.RiotSlider(s26,{
	range: true,
  rangeGapFixed: true,
	marks: {
		0: '￥0',
		20: '￥150',
		40: '￥300',
		60: '￥450',
		80: '￥600',
		100: '￥750'
	},
	value:[20,40],
  onChange: function(v){
		var str;
		if(v[0] === v[1]){
			str = '￥' + v[0] * 7.5;
		}else{
			str = '￥' + v[0] * 7.5 + ' - ' + '￥' + v[1] * 7.5;
		}
		i26.value = str;
  }
});
console.log(rs26);