服務(wù)熱線
15617359779
15617359779
在項目中需要制作一個價格區(qū)間來回滑動的滑塊,在網(wǎng)上查找時無意間知道了bootstrap-slider,經(jīng)過了解和使用這是一款在原生bootstrap slider的基礎(chǔ)上制作效果非常炫酷的jQuery slider插件。該slider插件可以自定義slider的顏色、形狀、透明度和tooltip等屬性,美化的效果非常好。在開始之前需要引入bootstrap.min.css、bootstrap-slider.min.css、jquery.min.js和bootstrap-slider.min.js等;如圖:
meta信息
在開始制作前先看看效果如圖:
河南網(wǎng)絡(luò)推廣,河南網(wǎng)絡(luò)營銷,seo公司,河南百度優(yōu)化,河南網(wǎng)站優(yōu)化,河南全網(wǎng)營銷
顯示效果1
滑動滑塊之后的效果如圖:
顯示效果2
河南網(wǎng)絡(luò)推廣,河南網(wǎng)絡(luò)營銷,seo公司,河南百度優(yōu)化,河南網(wǎng)站優(yōu)化,河南全網(wǎng)營銷
HTML制作如圖:
HTML代碼
JS如圖:
河南網(wǎng)絡(luò)推廣,河南網(wǎng)絡(luò)營銷,seo公司,河南百度優(yōu)化,河南網(wǎng)站優(yōu)化,河南全網(wǎng)營銷
JS代碼
CSS部分挺簡單的我就不在這上圖了,首先是HTML,用一個DIV包裹一個input標(biāo)簽和價格DIV標(biāo)簽,給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', {})是初始化這個插件,{}里面可以寫自己要設(shè)定的參數(shù)和值,比如如圖:
參數(shù)說明表
河南網(wǎng)絡(luò)推廣,河南網(wǎng)絡(luò)營銷,seo公司,河南百度優(yōu)化,河南網(wǎng)站優(yōu)化,河南全網(wǎng)營銷
河南億宏世紀(jì)網(wǎng)絡(luò)科技有限公司,專注于互聯(lián)網(wǎng)+品牌整合營銷,公司擁有專業(yè)的互聯(lián)網(wǎng)管理、運營策劃、UI設(shè)計、技術(shù)開發(fā)等團隊,專業(yè)從事于工業(yè)互聯(lián)網(wǎng)的開發(fā)建設(shè)。我司擁有成熟的網(wǎng)絡(luò)技術(shù)開發(fā)團隊,針對網(wǎng)站開發(fā)、技術(shù)服務(wù)、網(wǎng)站風(fēng)格定位、網(wǎng)站功能優(yōu)化、網(wǎng)站推廣維護等都具備很強的專業(yè)技術(shù)水平,旨在為客戶提供專業(yè)的互聯(lián)網(wǎng)應(yīng)用解決方案。公司始終秉持著誠信經(jīng)營、質(zhì)量為先的經(jīng)營理念,我們不僅提供優(yōu)質(zhì)的網(wǎng)絡(luò)技術(shù)和云端供應(yīng)鏈服務(wù),而且還在產(chǎn)品的選擇、應(yīng)用等方面提供專業(yè)的咨詢與售后服務(wù)。