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;
  --progress-shadow: 2px 2px 4px rgba(0,0,0, .1) inset;
  --fill-color: var(--primaryColor);
  --thumb-size: 16px;
  --track-height: calc(var(--thumb-size)/2);
  --thumb-shadow: 0 0 3px rgba(0,0,0,.2);
  --ticks-thickness: 1px;
  --ticks-height: 5px;
  --ticks-color: silver;
  --step: 1;
  --ticks-count: (var(--max) - var(--min)) / var(--step);
  --maxTicksAllowed: 30;
  --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
  --x-step: Max( var(--step), var(--too-many-ticks) * (var(--max) - var(--min)) );
  --tickInterval: 100/((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
  --tickIntervalPerc: calc((100% - var(--thumb-size))/( (var(--max) - var(--min)) / var(--x-step) ) * var(--tickEvery, 1));
  --completed: calc((var(--value) - var(--min) ) / (var(--max.........完整代码请登录后点击上方下载按钮下载查看