实现 input range 双滑块，范围选择
super
2022-08-22 18:55
3162
使用layui，快速实现功能
加粗效果，打开注释的css样式即可
代码下载：https://rongsp.com/download/layui_slider.zip
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>区间滑块</title>
<meta name="author" content="super">
<meta name="website" content="https://rongsp.com">
<link rel="stylesheet" href="layui.css">
<style type="text/css">
#slide1 {
margin-top: 100px;
margin-left: 50px;
width: 200px;
}
#slide2 {
margin-top: 200px;
margin-left: 50px;
width: 200px;
}
/*如果想把轨道设置的宽一些，开启以下代码*/
/*.layui-slider {
background: rgb(220,227,237); // 设置滑块轨道未选中区域的颜色
}
.slideTest17 {
height: 10px;
}
.layui-slider {
height: 10px;
}
.layui-slider-wrap {
top: -14px;
}
.layui-slider-wrap-btn {
width: 24px;
height: 24px;
}*/
</style>
</head>
<body>
<div id="slide1"></div>
<div id="slide2"></div>
<script src="layui.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
layui.use('slider', function(){
var $ = layui.$
,slider = layui.slider;
//默认滑块
slider.render({
elem: '#slide1'
,min: 0
,max: 23
,value: [8, 18]
,range: true
,theme: '#FF5722' //主题色
,change: function(value){
// alert(value);
// console.log(value) //动态获取滑块数值
//do something
}
});
slider.render({
elem: '#slide2'
,min: 1 // 最小值
,max: 7 // 最大值
,value: [1, 5] // 默认值，如果开启了range = true ,此处需要给一个数组[value1, value2]
,range: true // 是否开启范围选择
,theme: '#FF5722' // 主题色
,change: function(value) { // 滑块滑动时的回调，如果开启了range = true 值为[value1, value2]
// alert(value);
// console.log(value) //动态获取滑块数值
// do something
}
});
});
</script>
</body>
</html>
Layui 文档：
1 条讨论
-
#1
