layui/docs/slider/detail/demo.md

  <div id="ID-slider-demo"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo'
  });
});
</script>
  

定义初始值

  <div id="ID-slider-demo-value"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-value',
    value: 20 //初始值
  });
});
</script>
  

设置最大和最小值

  <div id="ID-slider-demo-maxmin"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-maxmin',
    min: 20, // 最小值
    max: 50 // 最大值
  });
});
</script>
  

设置步长

  <div id="ID-slider-demo-step-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-step-2"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-step-1',
    step: 10 // 步长
  });

  slider.render({
    elem: '#ID-slider-demo-step-2',
    step: 10, // 步长
    showstep: true // 开启间隔点
  });
});
</script>
  

设置提示文本

  <div id="ID-slider-demo-setTips-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-setTips-2"></div>
<div id="ID-slider-demo-setTips-result"></div>
<hr class="ws-space-16">
<hr class="ws-space-16">
<div id="ID-slider-demo-setTips-tipsAlways"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  var $ = layui.$;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-setTips-1',
    min: 20,
    max: 1000,
    setTips: function(value){ // 自定义提示文本
     return value + 'GB';
    }
  });
  slider.render({
    elem: '#ID-slider-demo-setTips-2',
    tips: false, // 关闭默认提示层
    change: function(value){
      $('#ID-slider-demo-setTips-result').html('当前数值：'+ value);
    }
  });
  slider.render({
    elem: '#ID-slider-demo-setTips-tipsAlways',
    tips: true, // 开启提示文本
    tipsAlways: true // 开启始终显示提示文本
  });
});
</script>
  

开启输入框

  <div id="ID-slider-demo-input"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-input',
    input: true //输入框
  });
});
</script>
  

开启范围选择

  <div id="ID-slider-demo-range-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-range-2"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  var layer = layui.layer;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-range-1',
    value: 40, // 初始值
    range: true, // 范围选择
    done: function(vals){
      layer.msg('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
    }
  });
  slider.render({
    elem: '#ID-slider-demo-range-2',
    value: [30, 60], // 初始值
    range: true // 范围选择
  });
});
</script>
  

垂直滑块

  <br><br>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-1"></div>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-2"></div>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-3"></div>
<div class="layui-inline" id="ID-slider-demo-vertical-4"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-vertical-1',
    type: 'vertical' // 垂直滑块
  });
  slider.render({
    elem: '#ID-slider-demo-vertical-2',
    value: 30,
    type: 'vertical' // 垂直滑块
  });
  slider.render({
    elem: '#ID-slider-demo-vertical-3',
    value: 50,
    range: true, // 范围选择
    type: 'vertical' // 垂直滑块
  });
  slider.render({
    elem: '#ID-slider-demo-vertical-4',
    value: 80,
    input: true, // 输入框
    type: 'vertical' // 垂直滑块
  });
});
</script>
  

自定义主题色

  <div id="ID-slider-demo-theme-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-theme-2"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-theme-3"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-theme-1',
    theme: '#1E9FFF' // 主题色
  });
  slider.render({
    elem: '#ID-slider-demo-theme-2',
    value: 50,
    theme: '#16b777' // 主题色
  });
  slider.render({
    elem: '#ID-slider-demo-theme-3',
    value: [30, 70],
    range: true,
    theme: '#FF5722' // 主题色
  });
});
</script>
  

禁用滑块

  <div id="ID-slider-demo-disabled"></div>

<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;

  // 渲染
  slider.render({
    elem: '#ID-slider-demo-disabled',
    value: 35,
    disabled: true // 禁用滑块
  });
});
</script>