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

css部分:

input.ne-range[type=range]::-webkit-slider-thumb {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 0;
    background-color: #FFF;
    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;
    -webkit-appearance: none !important;
}

input.ne-range[type=range]::-webkit-slider-thumb:active {
    border: 0;
    background-color: #FFF;
}

input.ne-range[type=range] {
    width: 100%;
    height: 2px;
    border-radius: 8px;
    margin: .8em 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    background: -webkit-linear-gradient(#FFF, #FFF) no-repeat #999999;
    background-size: 0% 100%;
    position: relative;
    outline: 0;
    top: -3px;
    -webkit-appearance: none !important;
}

html:

<input type="range" id="slider" name="slider" class="ne-range" value="0" />

js:

  $.fn.RangeSlider = function (cfg) {
    this.sliderCfg = {
      min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
      max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
      step: cfg && Number(cfg.step) ? cfg.step : 1,
      callback: cfg && cfg.callback ? cfg.callback : null
    };

    var $input = $(this);
    var min = this.sliderCfg.min;
    var max = this.sliderCfg.max;
    var step = this.sliderCfg.step;
    var callback = this.sliderCfg.callback;

    $input.attr('min', min)
      .attr('max', max)
      .attr('step', step);

    $input.bind("input", function (e) {
      $input.attr('value', this.value);
      $input.css('background-size', this.value * 100.0 / max + '% 100%');

      if ($.isFunction(callback)) {
        callback(this);
      }
    });
  };

  var change = function ($input) {
    //拖动滑块的事件
  }

  $('#slider').RangeSlider({
    min: 0,
    max: 550,
    step: 1,
    callback: change
  });

效果如图:

参考:  https://www.jianshu.com/p/54fd0f8f8481