knobs实现自定义range拖动块效果代码-html代码-BFW代码库

knobs实现自定义range拖动块效果代码

代码语言：html

所属分类：选择器

代码描述：knobs实现自定义range拖动块效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 10%;
}

a {
  position: fixed;
  top: 1em;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: inline-block;
  width: 200px;
}
a > img {
  display: inherit;
  width: 100%;
}

.controller {
  display: -webkit-box;
  display: flex;
  width: 90vw;
  border-bottom: 1px solid #DDD;
  padding: 2em 0;
}
.controller .range {
  width: 100%;
  min-width: 100px;
}
.controller label {
  -webkit-box-flex: 1;
          flex: 1;
}
.controller label:not(:last-child) {
  padding-right: 1em;
}
.controller label > span {
  display: block;
  margin-bottom: 1em;
}

body > label > xmp {
  text-align: center;
}
body > label > span {
  margin-left: 1em;
}

.range {
  width: 50vw;
  min-width: 200px;
}

.range {
  --primaryColor: #0366D6;
  --value-active-color: white;
  --value-background: white;
  --value-font: 700 12px/1 Arial;
  --progress-color: #EEE;
  --pr.........完整代码请登录后点击上方下载按钮下载查看