少有人走的路

（1）基本样式

用户拖动的控制柄（.slider控制柄）。

填充（.slader填充），根据控制柄所在的位置动态调整大小。

隐藏的＜input＞，即滑块值的存储位置。

数据初始start=“”值是控制柄沿滑块开始的位置。data end=“”是滑块的最大值。

在下面的示例中，从200中的50开始意味着滑动手柄将从总数的25%开始。

<div class="slider" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

（2）垂直的

<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

（3）禁用

<div class="slider disabled" data-slider data-initial-start="78">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>

（4）两个手柄

<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <input type="hidden">
  <input type="hidden">
</div>

（5）数据绑定

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50">
      <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutput1">
  </div>
</div>

改变步幅值，下面一次动5个单位

<div class="grid-x grid-margin-x">
  <div class="cell small-10">
    <div class="slider" data-slider data-initial-start="50" data-step="5">
      <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
      <span class="slider-fill" data-slider-fill></span>
    </div>
  </div>
  <div class="cell small-2">
    <input type="number" id="sliderOutput2">
  </div>
</div>

老版本的滑动条控件

在Foundation6.2中，我们引入了<input-type=“range”>的样式，这是范围滑块的原生HTML元素。并不是所有浏览器都支持它

<input type="range" min="1" max="100" step="1">

--------------------- 

作者：hackpig

来源：www.skcircle.com

版权声明：本文为博主原创文章，转载请附上博文链接！