slider滑杆插件

需求：做一个自由拖动并可以点上一页 下一页的滑杆(请忽略样式)
（我自己尝试着做过，但是后来发现bug多多，还是用现成的方便，效果完美）

滑杆效果图

html:

<!-- slider -->
<div class="slider-container" id="slider-container">
  <div class="bottombutton">
    <button type="button" class="up" onclick="preImg()" id="btnUp">-</button>
    <button type="button" class="down" onclick="nextImg()" id="btnDown">+</button>
    <div class="range-area">
        <input type="text" class="range-input" name="range-input" 
        data-slider-tooltip-position="left" data-slider-tooltip ="hide" 
        data-provide="slider" data-slider-orientation="horizontal"/>
    </div>
  </div>
</div>
<!-- /slider -->

css:

<style>
  .slider-container{
    width:885px;
  }
  .range-area{
    width:600px;
  }
  .slider-handle{
    background: blue;
    opacity:0.5;
  }
  .up,.down{
    background: #0066cc;
  }
  .bottombutton .number{
    color:#333;
  }
</style>

js:

<script>
  var imageTotal = 100;
  var pageIndex = 1;
  $( function() {

    //  初始化slider
    $('.range-input').slider(); 

    //  给slider设最大值
    if($('.range-input').slider('getAttribute', 'max') != 100){
      $('.range-input').slider('update',{value: 1, max:100});
    }
    else{
        $('.range-input').slider('setValue', parseInt(1));
    }

  });

  // 上一页
  function preImg(){
    pageIndex--;
    $('.range-input').slider('setValue', parseInt(pageIndex));
    console.log(pageIndex);
  }

  // 下一页
  function nextImg(){
    pageIndex++;
    $('.range-input').slider('setValue', parseInt(pageIndex));
    console.log(pageIndex);
  }

  $('.range-input').on('change', function (e) {
    //当值发生改变的时候触发
    pageIndex=e.value.newValue;
    console.log(pageIndex);
  })

</script>

注意事项：

• 滑杆要先 初始化 ,不然会报‘slider’ of undefined的错误；
• 滑杆要设置 最大值 ,不然无法拖动滑杆上的按钮。

引用成功后，页面上会加载出滑杆，如下图所示：

页面上的滑杆代码

点击下载 demo