jquery-ui实现一个垂直上下滑竿效果代码-html代码-BFW代码库

jquery-ui实现一个垂直上下滑竿效果代码

代码语言：html

所属分类：拖放

代码描述：jquery-ui实现一个垂直上下滑竿效果代码，拖动上下进行取值。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title></title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">

<style>
    *, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  background: #ff9770;
  font-size: 16px;
}

.wrapper {
  width: 52px;
  margin: 10px auto;
}

.map-icon {
  width: 52px;
  height: 52px;
  background: #f7f7f7;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  margin-bottom: 15px;
  text-align: center;
  color: #adccce;
  padding: 14px 0;
}
.map-icon span {
  font-size: 1.3em;
}

.map-slider {
  width: 52px;
  height: 330px;
  background: #f7f7f7;
  border-radius: 3px;
  text-align: center;
  -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  color: #866a62;
}
.map-slider::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #dedede;
  position: absolute;
  left: 0;
  margin-top: 50px;
  -webkit-box-shadow: 0 1px 0 0 white, 0 230px 0 0 #dedede,  0 229px 0 0 white;
  box-shadow: 0 1px 0 0 white, 0 230px 0 0 #dedede,  0 229px 0 0 white;
}
.map-slider .fa-plus {
  display: block;
  padding-top: 16px;
  height: 50px;
  cursor: pointer;
}
.map-slider .fa-minus {
  display: block;
  height: 50px;
  padding-top: 12px;
  cursor: pointer;
}
.map-slider .drag-line {
  width: 8px;
  height: 182px;
  background: #ff9770;
  border-radius: 8px;
  margin: 25px auto;
  position: relative;
}
.map-slider .line {
  width: 8px;
  height: 182px;
  background: #adccce;
  border-radius: 8px;
  margin: 25px auto;
  position: absolute;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 10px;
  clip: rect(0px, 8px, 183px, 0px);
}
.map-slider .draggable-button {
  width: 29px;
  height: 29px;
  background: #f7f7f7;
  border-radius: 50%;
  position: absolute;
  -webkit-box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.2);
  margin-left: -9px;
  curs.........完整代码请登录后点击上方下载按钮下载查看