css实现一个刻度尺数值滑动拖动选择器效果代码-html代码-BFW代码库

css实现一个刻度尺数值滑动拖动选择器效果代码

代码语言：html

所属分类：选择器

代码描述：css实现一个刻度尺数值滑动拖动选择器效果代码

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


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

<head>

  <meta charset="UTF-8">


  
<style>
* {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}

html, body, form, form * {
  display: grid;
}

html {
  height: 100%;
}

.js {
  --js: 1 ;
}

body, datalist {
  place-content: center;
}

body {
  font: 1em/1.25 ubuntu, sans-serif;
}

form, option {
  place-items: center;
}

form {
  --extra: 0;
  --large: 0;
  --not-large: calc(1 - var(--large));
  --small: 0;
  --not-small: calc(1 - var(--small));
  --track-w: min(25em, 100vw - 2*1.75em);
  overflow-x: hidden;
  padding: 0.875em;
  background: hsla(0, 0%, 91%, var(--hl));
  filter: grayScale(calc(1 - var(--hl, 0)));
  transition: 0.35s;
}
@media (min-width: 28.5em) {
  form {
    --extra: 1 ;
  }
}
@media (min-width: 320px) {
  form {
    --large: 1 ;
  }
}
@media (max-width: 220px) {
  form {
    --small: 1 ;
  }
}
form:focus-within, form:hover {
  --hl: 1 ;
}

label {
  font-size: 137.5%;
}

[for] {
  font-weight: 700;
}

input {
  width: calc(var(--track-w) + 1.75em);
  background: linear-gradient(90deg, #15b190 25%, #f7c742 0 75%, #b1154c 0) 50%/var(--track-w) 0.375em no-repeat;
  cursor: pointer;
}
input::-webkit-slider-runnable-track, input::-webkit-slider-thumb, input {
  -webkit-appearance: none;
}
input::-webkit-slider-thumb {
  margin-top: -0.35em;
  border: none;
  width: 1.75em;
  height: 1.75em;
  background: currentcolor;
  --poly: polygon(50% 100%, 6.6987298108% 25%, 93.3012701892% 25%);
  -webkit-clip-path: var(--poly);
  clip-path: var(--poly);
  cursor: ew-resize;
}
input::-moz-range-thumb {
  margin-top: -0.35em;
  border: none;
  width: 1.75em;
  height: 1.75em;
  background: currentcolor;
  --poly: polygon(50% 100%, 6.6987298108% 25%, 93.3012701892% 25%);
  -webkit-clip-path: var(--poly);
  clip-path: var(--poly);
  cursor: ew-resize;
}
input:focus {
  outline: none;
}
input + output {
  --rng: calc(var(--max) - var(--min));
  --pos: calc((var(--val) - var(--min))/var(--rng)*var(--track-w));
  display: var(--js, none);
  grid-row: 2;
  justify-self: .........完整代码请登录后点击上方下载按钮下载查看