Jquery实现弹性滑块滑动选择数值插件_jquery

来源：动视网责编：小采时间：2020-11-27 21:41:48

Jquery实现弹性滑块滑动选择数值插件_jquery

Jquery实现弹性滑块滑动选择数值插件_jquery:做了一个类似于阿里云弹性计算中的滑块效果，可以自由滑动滑块，并且计算刻度。基于jQuery实现，小伙伴们不要忘记载入jquery哦 CSS .main { margin: 0 auto; margin-top: 100px; width: 500px; font-family: 微软雅黑; -webk

推荐度：

点击下载本文 文档为doc格式

导读Jquery实现弹性滑块滑动选择数值插件_jquery:做了一个类似于阿里云弹性计算中的滑块效果，可以自由滑动滑块，并且计算刻度。基于jQuery实现，小伙伴们不要忘记载入jquery哦 CSS .main { margin: 0 auto; margin-top: 100px; width: 500px; font-family: 微软雅黑; -webk

做了一个类似于阿里云弹性计算中的滑块效果，可以自由滑动滑块，并且计算刻度。基于jQuery实现，小伙伴们不要忘记载入jquery哦

CSS

.main {
 margin: 0 auto;
 margin-top: 100px;
 width: 500px;
 font-family: 微软雅黑;
 -webkit-user-select: none;
}
.contain {
 width: 500px;
 height: 40px;
 background-color: #E8E8E8;
}
.track {
 width: 16px;
 height: 46px;
 position: absolute;
 margin: -3px 0 0 0px;
 background-color: #2dacd1;
 cursor: pointer;
}
.valueC {
 height: 40px;
 position: absolute;
 margin: 0;
 background-color: #43BFE3;
}
.value span {
 position: absolute;
 text-align: right;
 height: 40px;
 line-height: 40px;
 color: #808080;
 border-right: 1px solid #dddddd;
}
.show {
 width: 45px;
 height: 30px;
 background-color: #333;
 color: #fff;
 text-align: center;
 line-height: 30px;
 position: absolute;
 opacity: 0.9;
 margin-top: -38px;
 margin-left: -15px;
}

HTML

演示图：