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

代码语言：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) - var(--min)) * 100);
  --LTR: 1;
  display: inline-block;
  height: Max(var(--track-height), var(--thumb-size));
  background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;
  background-size: var(--tickIntervalPerc) var(--ticks-height);
  background-position-x: calc(var(--thumb-size)/2);
  background-position-y: var(--flip-y, bottom);
  position: relative;
  z-index: 1;
  padding-bottom: var(--flip-y, var(--ticks-height));
  padding-top: calc(var(--flip-y) * var(--ticks-height));
}
[dir="rtl"] .range {
  --LTR: -1;
}
.range[data-ticks-position='top'] {
  --flip-y: 1;
}
.range::before, .range::after {
  --offset: calc(var(--thumb-size)/2);
  content: counter(x);
  display: var(--show-min-max, block);
  font: 12px Arial;
  position: absolute;
  bottom: var(--flip-y, -2.5ch);
  top: calc(-2.5ch * var(--flip-y));
  opacity: var(--min-max-opacity, 0.5);
  pointer-events: none;
}
.range::before {
  counter-reset: x var(--min);
  left: var(--offset);
  -webkit-transform: translateX(Calc(-50% * var(--LTR)));
          transform: translateX(Calc(-50% * var(--LTR)));
}
[dir='rtl'] .range::before {
  left: auto;
  right: var(--offset);
}
.range::after {
  counter-reset: x var(--max);
  right: var(--offset);
  -webkit-transform: translateX(Calc(50% * var(--LTR)));
          transform: translateX(Calc(50% * var(--LTR)));
}
[dir='rtl'] .range::after {
  right: auto;
  left: var(--offset);
}
.range__progress {
  position: absolute;
  left: 0;
  top: calc(50% - var(--ticks-height)/2);
  -webkit-transform: var(--flip-y, translateY(-50%) translateZ(0));
          transform: var(--flip-y, translateY(-50%) translateZ(0));
  width: 100%;
  height: calc(var(--track-height));
  pointer-events: none;
  z-index: -1;
  border-radius: 20px;
  overflow: hidden;
}
.range__progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 5px;
  top: 0;
  bottom: 0;
  background: var(--fill-color, white);
  box-shadow: var(--progress-shadow);
  z-index: -1;
}
[dir="rtl"] .range__progress::before {
  right: 0;
  left: 5px;
}
.range__progress::after {
  content: '';
  display: block;
  margin-left: auto;
  margin-right: -1px;
  width: calc(100% - var(--completed) * 1% + (var(--completed)/100) * var(--thumb-size)/2);
  height: 100%;
  background: var(--progress-color, #EEE);
  box-shadow: inherit;
}
[dir="rtl"] .range__progress::after {
  margin-right: auto;
  margin-left: -1px;
}
.range > input {
  -webkit-appearance: none;
  width: 100%;
  height: var(--thumb-size);
  position: absolute;
  top: calc(50% - var(--thumb-size)/2);
  margin-top: var(--flip-y, calc(var(--ticks-height)/-2));
  cursor: -webkit-grab;
  cursor: grab;
  outline: none;
  background: none;
}
.range > input::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-color, white);
  border: 1px solid silver;
  box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
}
.range > input::-moz-slider-thumb {
  -moz-appearance: none;
       appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-color, white);
  border: 1px solid silver;
  box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
}
.range > input::-ms-thumb {
  appearance: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  border-radius: 50%;
  background: var(--thumb-color, white);
  border: 1px solid silver;
  box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
}
.range > input:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  --thumb-color: var(--fill-color);
  --inner-shadow: 0 0 0 calc(var(--thumb-size)/4) inset white;
}
.range > input:active + output {
  -webkit-transition: 0s;
  transi.........完整代码请登录后点击上方下载按钮下载查看