js+RangeSlider实现炫酷的滑块取值器代码-html代码-BFW代码库

js+RangeSlider实现炫酷的滑块取值器代码

代码语言：html

所属分类：拖放

代码描述：js+RangeSlider实现炫酷的滑块取值器代码，支持滑块的颜色调整与暗黑模式切换。

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

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

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


  <meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel='stylesheet' href=''>
<link rel='stylesheet' href='https://fonts.bunny.net/css?family=amaranth:400,400i,700,700i|asap-condensed:200,300i,400,400i,600,600i,700,700i,900,900i|kode-mono:400,500,600,700'>
<link rel='stylesheet' href='https://fonts.bunny.net/css?family=jersey-10:400'>
  
<style>
@import url(https://fonts.bunny.net/css?family=amaranth:400,400i,700,700i|asap-condensed:200,300i,400,400i,600,700,900|m-plus-1-code:400,500,600,700);

:root {
  --h: 222;
  --s: 20%;
  --l: 22%;
  
  --canvas: var(--h);
  --bg: hsl(var(--canvas), 15%, 22%);
  --fg: hsl(var(--canvas), 39%, 95%);
  --link-light: hsl(var(--canvas), 95%, 60%);
  --link-dark: hsl(var(--canvas), 95%, 70%);
  --link-light-hover: hsl(150, 80%, 45%);
  --link-dark-hover: hsl(150, 95%, 70%);
  --link: light-dark( var(--link-light), var(--link-dark) );
  --linkh: light-dark( var(--link-light-hover), var(--link-dark-hover) );
  --wgt: 200;

  --light: hsl(var(--h), var(--s), 95%);
  --dark: hsl(var(--h), var(--s), 20%);
  --tint: hsl(160, 85%, 60%);
  --tint2: hsl(200, 85%, 60%);
  --pads: 16px;
  --cols: 1fr;
  --radius: 16px;
  
  --bor: hsl(var(--h), var(--s), 85%);
  --labels: hsl(var(--h), var(--s), 55%);
  --b: hsla(var(--h), var(--s), 100%, 1);
  --svg: var(--fg);
  
  --thumb-shadow: 
      0px 1px 0px rgba(17,17,26,0), 
      0px 2px 2px rgba(17,17,26,0), 
      0px 4px 4px rgba(17,17,26,0);
  
  --thumb-shadow-on: 
      0px 1px 0px rgba(17,17,26,0.2), 
      0px 2px 6px rgba(17,17,26,0.2), 
      0px 4px 12px rgba(17,17,26,0.2);
  
  --spring: linear(
    0, 0.009, 0.035 2.1%, 0.142 4.6%, 0.283 6.9%, 0.726 13.3%, 0.941 17.2%, 1.02,
    1.08, 1.124, 1.153 24.9%, 1.163, 1.167, 1.165, 1.157 30.7%, 1.132 33.7%,
    1.051 40.7%, 1.017 44.2%, 0.99, 0.975 52.2%, 0.972 55.2%, 0.974 58.5%,
    0.996 71.5%, 1.003, 1.005 85.7%, 1
  );
    
  --bounce: linear(0, 0.199 14.6%, 0.37 23.8%, 0.591 32.2%, 0.999 44.7%, 0.793 52.7%, 
    0.745 56.1%, 0.728 59.5%, 0.74 62.5%, 0.778 65.7%, 0.999 77.4%, 0.956 81.3%, 0.943 
    84.9%, 0.951 88%, 0.993 95.5%, 1);
    
}

#app {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--pads);
  min-height: 100%;
}

body {
  padding: calc(var(--pads) * 1.5);
  font-family: 'Asap Condensed', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--fg);
  background-color: #171820;
  background-image: linear-gradient(
    180deg,
    hsl(var(--h), var(--s), 8%),
    hsl(var(--h), var(--s), 14%)
  );
  background-size: cover;
}

body,
html {
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

form,
.form,
.light {
  --bg: var(--light);
  --fg: var(--dark);
}

form,
.form {
  color: var(--fg);
  background-color: var(--bg);
  min-width: 100%;
  width: 100%;
  padding: calc(var(--pads) * 0.5) calc(var(--pads) * 1.5) calc(var(--pads) * 1);
  border-radius: var(--radius);
  box-shadow: 0 2px 3px hsla(var(--h), var(--s), 8%, 50%);
}

.dark {
  
  color-scheme: dark!important;
  
  --bor: hsl(var(--h), var(--s), 35%);
  --bg: var(--dark);
  --fg: var(--light);
  --labels: hsl(var(--h), var(--s), 65%);
  --b: hsla(var(--h), var(--s), 12%, 1);
  --tint: hsl(260, 85%, 60%);
  --tint2: hsl(300, 85%, 60%);
}

fieldset {
  min-width: 100%;
  width: 100%;
  border: 1px solid var(--bor);
  border-radius: calc(var(--radius) / 2);
  padding: var(--pads) calc(var(--pads) * 1.5);
  margin-block: var(--pads);
}

legend {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 2em;
  transform: translateX(-1em);
}

label {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-conten.........完整代码请登录后点击上方下载按钮下载查看