html 滑块选择数量,html5响应式漂亮的范围滑块

一款漂亮的html5范围选择滑块，响应式的效果兼容PC端和移动端，有横向滑块和竖向滑块多种特效，颜色、范围等都可以自行调整，滑块内可以显示对应的数字，个人还是比较喜欢的，各位童鞋怎么看呢？

查看演示

下载资源：

17

次 下载资源

下载积分：

30

积分

页面的head部分设置一下元素当前的样式，主要滑块的样式在底部调入，部分代码如下： @import url(css/697c0e5d40eb488b8dd279490153a588.css);

[id*=flat-slider].ui-slider,

[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {

background: #7e8c9f;

}

[id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after {

border-left-color: #434d5a;

}

[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover,

[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,

[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active {

border-color: white;

}

body {

font-family: "Roboto";

}

h1 {

font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif !important;

font-size: 28px !important;

text-align: center;

color: #7e8c9f;

padding: 0;

margin-top: 28px !important;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

cursor: default;

}

p {

color: #c7cdd5;

text-align: center;

margin: 0.5em 1em;

font-weight: 300;

font-size: 1.3em;

}

p:nth-of-type(1) {

margin-top: 3em;

}

p:last-child {

font-weight: 100;

font-size: 1em;

}

p:last-child a {

font-weight: 300;

}

.stuff {

padding: 50px 50px 50px;

max-width: 900px;

margin: auto;

}

页面的body部分结构比较简单，只要把四个范围滑块的容器设置好即可，代码如下：

响应式, 漂亮的, 多样式范围滑块

底部需要引入的样式和js比较多，主要是控制滑块的范围和滑动事件，代码如下：

$.extend( $.ui.slider.prototype.options, {

animate: 300

});

$("#flat-slider")

.slider({

max: 50,

min: 0,

range: true,

values: [15, 35]

})

.slider("pips", {

first: "pip",

last: "pip"

});

$("#flat-slider-vertical-1")

.slider({

max: 25,

min: 0,

range: "min",

value: 25,

orientation: "vertical"

});

$("#flat-slider-vertical-2")

.slider({

max: 25,

min: 0,

range: "max",

value: 12,

orientation: "vertical"

});

$("#flat-slider-vertical-3")

.slider({

max: 25,

min: 0,

range: "min",

value: 0,

orientation: "vertical"

});

$("#flat-slider-vertical-1, #flat-slider-vertical-2, #flat-slider-vertical-3")

.slider("pips", {

first: "pip",

last: "pip"

})

.slider("float");