J9国际集团|Home

135-2716-3909
网站建设资讯详细

网页前端□□□制作之bootstrap-slider制作价格□□区间滑块

发表日期:2026-07-05 11:43:04   作者来源:严成   浏览:4689   标签:网页前端制作    
在项目中□□□□需要制作□□□一个价格▲区间来回▲滑动的滑□□块,在网上查□□□找时无意□□□□间知道了bootstrap-slider,经过了解•和使用这□□是一款在◣原生bootstrap slider的基础上□□制作效果□□非常炫酷▼的jQuery slider插件。该slider插件可以□□自定义slider的颜色、形状、透明度和tooltip等属性,美化的效○果非常好。在开始之□□前需要引□□□入bootstrap.min.css、bootstrap-slider.min.css、jquery.min.js和bootstrap-slider.min.js等;如图:
 

meta信息



在开始制作前先看看效果如图:
 

显示效果1



滑动滑块之后的效果如图:
 

显示效果2



HTML制作如图:
 

HTML代码



JS如图:
 

JS代码



CSS部分挺简□□单的我就□□□□不在这上□□□图了,首先是HTML,用一个DIV包裹一个input标签和价□□格DIV标签,给input添加ID名ex2,input上有四个□□□□属性:data-slider-min="0"、data-slider-max="50000"、data-slider-step="1000"和data-slider-value="[0,50000]",其中data-slider-min="0"表示最小□□□值是0,data-slider-max="50000"表示最大◥值是50000,data-slider-step="1000"表示每次□□□□滑动滑块□□□的值最少□□增加或减□□小1000;data-slider-value="[0,50000]"表示值在0到50000之间滑动。var slider = new Slider('#ex2', {})是初始化◇这个插件,{}里面可以□□□写自己要□□□设定的参□□□□数和值,比如如图:
 

参数说明表

 
 
如没特殊注明,文章均为J9国际集团原创,转载请注明来自https://www.nzweibaum.com/news/5730.html