Bubble Slider-可将input元素转换为漂亮的slider滑块的jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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

可以在移动手机设备上工作。
响应式设计。
在不支持的浏览器上会回退为普通的input组件。
所有的参数都是可选项。
可为数字添加前缀和后缀。
滑块的颜色可以自由定制。

使用方法

使用该滑块插件需要在页面中引入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>

Bubble Slider滑块插件的github地址为：https://github.com/dahjson/bubble-slider