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>