css+js实现多种不同风格的滑动取值器效果代码-html代码-BFW代码库

css+js实现多种不同风格的滑动取值器效果代码

代码语言：html

代码描述：css+js实现多种不同风格的滑动取值器效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
.c-rng {
        --rng-focus: #064374;
        --rng-lower: #6495ED;
        --rng-upper: #CFD8DC;
        --rng-percent: 0%;
        --rng-percent-upper: 80%;
        
        --rng-bdrs: .375rem;
        --rng-bgi: linear-gradient(to right, var(--rng-lower) var(--rng-percent), var(--rng-upper) var(--rng-percent));
        --rng-h: 0.75rem;
        --rng-m: 2rem 0;
        --rng-w: 100%;
        
        --rng-label-c: #333;
        --rng-label-fz: 0.75rem;
        --rng-label-off: 0.25rem;
                                
        --rng-thumb-bdrs: 50%;
        --rng-thumb-bxsh: none;
        --rng-thumb-bxsh--focus: inset 0 0 0 0.25rem var(--rng-focus);
        --rng-thumb-bgc: #0960A5;
        --rng-thumb-h: 2rem;
        --rng-thumb-w: 2rem;
        --rng-thumb-z: 1;
        
        background-image: var(--rng-bgi);
        border-radius: var(--rng-bdrs);
        box-sizing: border-box;
        font-family: inherit;
        height: var(--rng-h);
        margin: var(--rng-m);
        outline: none;
        position: relative;
        width: var(--rng-w);
}
/* 
=====
THUMB
=====
*/
.c-rng::-moz-range-thumb {
        background-color: var(--rng-thumb-bgc);
        border-radius: var(--rng-thumb-bdrs);
        box-shadow: var(--rng-thumb-bxsh);
        color: #000;
        cursor: ew-resize;
  height: var(--rng-thumb-h);  
        margin-top: calc(0px - ((var(--rng-thumb-h) - var(--rng-h)) / 2));
        position: relative;
        width: var(--rng-thumb-w);
        z-index: var(--rng-thumb-z);
}
.c-rng::-webkit-slider-thumb {
        background-color: var(--rng-thumb-bgc);
        border-radius: var(--rng-thumb-bdrs);
        box-shadow: var(--rng-thumb-bxsh);
        cursor: ew-resize;
  height: var(--rng-thumb-h);  
        margin-top: calc(0px - ((var(--rng-thumb-h) - var(--rng-h)) / 2));
        position: relative;
        width: var(--rng-thumb-w);
        z-index: var(--rng-thumb-z);
}
.c-rng:focus::-webkit-slider-thumb {
        box-shadow: var(--rng-thumb-bxsh--focus);
}
/* 
=====
TRACK
=====
*/
.c-rng::-moz-range-track {
        background: transparent;
        background-size: 100%;
        border-radius: var(--rng-bdrs);
        box-sizing: border-box;
        height: var(--rng-h);
}
.c-rng::-webkit-slider-runnable-track {
        background: transparent;
        background-size: 100%;
        border-radius: var(--rng-bdrs);
        box-sizing: border-box;
        height: var(--rng-h);
}
.c-rng,
.c-rng::-webkit-slider-runnable-track,
.c-rng::-webkit-slider-thumb {
        -webk.........完整代码请登录后点击上方下载按钮下载查看