h5 range实现slider滑块功能及样式自定义

公司最近人手不足，于是，又开始折腾起Html来了
本文主要讲slider滑块的实现、样式自定义、刻度绘制、与输入框的联动

我们先来看看效果图

h5 slider.gif

上图中，我们需要实现的难点就是那个绿色的滑块，其它都是输入框及文本框，容易实现。

滑块的实现

其实，只要设置input的type，即可实现滑块功能

<input id="slider" type="range" min="0" max="550" step="1"  /> // step表示滑动的最小步长

效果如下：

range.jpg

样式自定义

虽然实现了滑块的效果，但是感觉有点太丑了，主要是和设计相差太远，于是，我们来美化下，先看看css

/** 
 * @range.css
**/
.ne-range_thumb,
input.ne-range[type=range]::-webkit-slider-thumb {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 0/**1px solid #45bd5c*/;
  background-color: #5cdf84;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21);
  -webkit-transition: border-color 0.15s, background-color 0.15s;
  transition: border-color 0.15s, background-color 0.15s;
  cursor: pointer;
  background-clip: padding-box;
  box-sizing: border-box;
}
.ne-range_thumb:active,
input.ne-range[type=range]::-webkit-slider-thumb:active {
  border: 0/**1px solid #45bd5c*/;
  background-color: #5cdf84;
}
.ne-range_track,
input.ne-range[type=range] {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  margin: .8em 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  /**background-color: #45bd5c;*/
  background: -webkit-linear-gradient(#40c35f, #40c35f) no-repeat #cccccc;
  background-size: 0% 100%;
}
.ne-range_track > span {