html5响应式漂亮的范围滑块

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

分类：其它特效 > 范围选择难易：初级

查看演示下载资源下载积分： 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部分结构比较简单，只要把四个范围滑块的容器设置好即可，代码如下：

<body>
<h1>响应式, 漂亮的, 多样式范围滑块</h1>
<div class="stuff">
    <main>
        <div id="flat-slider"></div>
        <div id="flat-slider-vertical-1"></div>
        <div id="flat-slider-vertical-2"></div>
        <div id="flat-slider-vertical-3"></div>
    </main>
</div>
</body>

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

<link type="text/css" rel="stylesheet" href="css/jqueryui.min.css">
<link type="text/css" rel="stylesheet" href="css/jquery-ui-slider-pips.min.css">
<link type="text/css" rel="stylesheet" href="css/app.min.css">
<script type="text/javascript" src="js/jquery-plus-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-slider-pips.js"></script>
<script type="text/javascript">
$.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");
</script>