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

2023-02-27 分类：网站建设

在项目中需要制作一个价格区间来回滑动的滑块，在网上查找时无意间知道了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', {})是初始化这个插件，{}里面可以写自己要设定的参数和值，比如如图：

参数说明表

当前标题：网页前端制作之bootstrap-slider制作价格区间滑块
文章地址：https://www.cdcxhl.com/news/240184.html

成都网站建设公司_创新互联，为您提供ChatGPT、网站收录、关键词优化、品牌网站设计、网站排名、小程序开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容