input元素转换为漂亮的slider滑块jQuery插件 - Bubble Slider

input元素转换为漂亮的slider滑块jQuery插件 - Bubble Slider3197
Bubble Slider是一款可以将任意input元素转换为漂亮的范围滑块slider的jQuery插件。转换后的滑块以圆形气泡作为滑块的拖动目标,并且会在拖动目标上以tooltip的形式显示当前滑块的值。

使用方法

使用该滑块插件需要在页面中引入bubble-slider.css,jQuery和jquery.bubble-slider.js文件。
<link href="build/bubble-slider.css" rel="stylesheet">                
<script src="js/jquery.min.js"></script>
<script src="js/jquery.bubble-slider.js"></script>  
HTML结构 为你需要转换的input元素添加bubble-slider class,你还可以设置min, max, step和value属性来设置滑块的值。除了上面的属性,其它的属性要通过data-属性来设置。
<input class="bubble-slider"
  name="example"
  placeholder="0 - 10"
  type="number"
  min="1"
  max="10">
配置参数
min:最小值,默认为0。
max:最大值,默认为100。
step:步长,默认为1。
value:当前值,默认为50。
decimals:显示的小数位数,默认为0。
prefix:数字的前缀,默认为' '。
postfix:数字的后缀,默认为' '。
color:缩略图,加减号按钮的颜色,默认为' '。
bgColor:滑块的背景色,默认为' '。
bubbleColor:气泡的前景色,默认为' '。
bubbleBgColor:气泡的背景色,默认为' '。
用举例 设置全局默认值。
<script>
$.fn.bubbleSlider.defaults = {
  decimals: 2
};
</script>  
通过CSS class来设置滑块。
<input class="bubble-slider"
  name="example"
  placeholder="0 - 10"
  type="number"
  min="1"
  max="10">
通过js来初始化滑块。
<input id="example">
<script>$("#example").bubbleSlider({min: 1, max: 10})</script>   
滑块最终生成的HTML结构,可以通过相应的class类来修改滑块的样式。
<div class="bubble-slider-wrap">
  <div class="bubble-slider-minus"><span>-</span></div>
  <div class="bubble-slider-plus"><span>+</span></div>
  <div class="bubble-slider-track">
    <div class="bubble-slider-thumb">
      <div class="bubble-slider-bubble">
        <div class="bubble-slider-bubble-arrow"></div>
        <span>0</span>
      </div>
    </div>
  </div>
</div>

也许你还喜欢