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

代码语言：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 {
        -webkit-appearance: none;
        appearance: none;
}
/* 
======
LABELS
======
*/
.c-rng::after,
.c-rng::before {
        color: var(--rng-label-c);
        font-size: var(--rng-label-fz);
        position: absolute;
        top: calc(var(--rng-h) + var(--rng-label-off));
        z-index: -1;
}
.c-rng[data-range-labels]::after {
        content: attr(max);
        right: 0;
}
.c-rng[data-range-labels]::before {
        content: attr(min);
}
/* 
======
OUTPUT
======
*/
.c-rng__output {
        --rng-output-bgc: #444;
        --rng-output-c: #EEE;
        --rng-output-p: 0.25rem 0 0 0;
        --rng-output-t: 0.25rem;
        --rng-output-w: 2rem;

        background-color: var(--rng-output-bgc);
        color: var(--rng-output-c);
        display: inline-block;
        font-family: sans-serif;
        font-size: 0.675rem;
        left: calc(1% * var(--rng-unit) - ((var(--rng-thumb-w) / 100) * var(--rng-unit)));
        padding: var(--rng-output-p);
        position: relative;
        text-align: center;
        top: var(--rng-output-t);
        width: var(--rng-output-w);
}
.c-rng__output::after {
        border-left: calc(var(--rng-output-w) / 2) solid transparent;
  border-right: calc(var(--rng-output-w) / 2) solid transparent;
        border-top: calc(var(--rng-output-w) / 3) solid var(--rng-output-bgc);
        content: "";
        height: 0; 
        left: 0;
        position: absolute;
        top: 100%;
        width: 0;
}
/* 
==============
OUTPUT WRAPPER
==============
*/
.c-rng--output,
.c-rng__multi {
        height: 4rem;
        margin-bottom: 1rem;
        position: relative;
}
.c-rng--output .c-rng,
.c-rng__multi .c-rng {
        bottom: 1rem;
        left: 0;
        margin: 0;
        position: absolute;
}
.c-rng--output .c-rng__output,
.c-rng__multi .c-rng__output {
        position: absolute;
        top: 0;
}
/* 
=====
MULTI
=====
*/
.c-rng__multi [data-range-type="lower"] {
        --rng-bgi: linear-gradient(to right, var(--rng-upper) var(--rng-percent), var(--rng-lower) var(--rng-percent), var(--rng-lower) var(--rng-percent-upper), var(--rng-upper) var(--rng-percent-upper));
}
.c-rng__multi [data-range-type="upper"] {
        background: none;
}

/* Modifiers */
.c-rng--grey {
        --rng-focus: #A0A0A0;
        --rng-lower: #B0B0B0;
        --rng-upper: #DEDEDE;
        --rng-h: 8px;
        --rng-thumb-bgc: #FFF;
        --rng-thumb-bxsh: 1px 2px 4px 1px rgba(0, 0, 0, .25);
}
.c-rng--pink {
        --rng-focus: #E6002A;
        --rng-lower: #FF91A6;
        --rng-upper: #FFE0E5;
        --rng-h: 4.........完整代码请登录后点击上方下载按钮下载查看