css实现range数字选择美化效果代码-html代码-BFW代码库

css实现range数字选择美化效果代码

代码语言：html

代码描述：css实现range数字选择美化效果代码，美化成类似tab选项卡效果。

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@charset "UTF-8";
:root {
  --offset: 2px;
  --range-min: 1;
  --range-max: 3;
  --range: var(--range-min);
  --slider-thumb-size: 32px;
  --track-height: 36px;
  --progress-bg: linear-gradient(
    45deg,
    rgba(59, 173, 227, 1) 0%,
    rgba(87, 111, 230, 1) 25%,
    rgba(152, 68, 183, 1) 51%,
    rgba(255, 53, 127, 1) 100%
  );
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
  background-color: #333;
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  display: grid;
  place-content: center;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  resize: both;
  width: 360px;
  margin-bottom: 60px;
  container-name: change-datalist;
  animation: range-observer linear reverse;
  animation-timeline: --range-thumb;
  animation-range: contain;
  timeline-scope: --range-thumb;
}

@property --range {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@supports (timeline-scope: --foo) {
  input[type=range]::-webkit-slider-thumb {
    view-timeline: --range-thumb inline;
  }

  @keyframes range-observer {
    0% {
      --range: var(--range-min);
    }
    100% {
      --range: var(--range-max);
    }
  }
}
input[type=range] {
  --tab-track-width: calc((100% - var(--offset) * 2));
  --tab-size: calc(var(--tab-track-width) / 3);
  --progress: (var(--range) - var(--range-min)) /
    (var(--range-max) - var(--range-min));
  --progress-length: calc(
    (var(--tab-track-width) - var(--tab-size)) * var(--progress) + var(--offset)
  );
  position: relative;
  appearance: none;
  background: none;
  width: 100%;
}
input[type=range]::after {
  pointer-events: none;
  content: "";
  border-radius: 6px;
  background-color: #23e179b1;
  background-color: #fff;
  background: var(--progress-bg) no-repeat;
  font-size: 16px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: var(--tab-size);
  top: 2px;
  bottom: 2px;
  transition: left 0.4s, scale 0.3s, top 0.3s, bottom 0.3s;
  left: var(--progress-length);
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  background: none;
  cursor: pointer;
  width: calc(100% / 3);
  height: 100%;
  position: .........完整代码请登录后点击上方下载按钮下载查看