svg+js实现一个粘性双色拖动滑块效果代码-html代码-BFW代码库

svg+js实现一个粘性双色拖动滑块效果代码

代码语言：html

所属分类：拖放

代码描述：svg+js实现一个粘性双色拖动滑块效果代码

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

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

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

    <style>
        body{height:100vh;display:flex;background:#225378;overflow:hidden;flex-direction:column;margin:0;font-family:"Montserrat"}.wrapper{margin:auto}.slider,.slidervertical{position:absolute;left:0;top:0;overflow:visible;z-index:100}.label{vertical-align:middle;display:inline-block;color:white;text-transform:uppercase;letter-spacing:.02em}.label.fun{color:#EB7F00}.label.not-fun{color:#ACF0F2}.slidershell{margin:0 20px;vertical-align:middle;display:inline-block;border:0 none;position:relative;left:0;top:0;overflow:visible;filter:url(#goo)}.slidertrack{border-radius:4px;position:absolute;background:#61c2ca}.sliderfill{position:absolute;pointer-events:none;background:#EB7F00;border-radius:4px}.sliderthumb{width:30px;height:30px;display:block;background:white;border-radius:50%;background-position:0 0;position:absolute;left:0;top:0;border:0 none;padding:0;margin:0;text-align:center;pointer-events:none}input[type=range]{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:0 none;background:transparent;color:transparent;overflow:visible}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-thumb{width:40px;height:40px;border-radius:0;border:0 none;background:transparent;-webkit-appearance:none}svg{width:0;height:0;position:absolute;left:0;top:0}@media(max-width:610px){.label{display:none}.slidershell{margin:0}}.sadface{background:#fefefe;text-align:center;padding:16px;text-transform:uppercase;color:#94a9b9}
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="label not-fun">最小值</div>
        <div class="slidershell" id="slidershell1">
            <div class="slidertrack" id="slidertrack1"></div>
            <div class=".........完整代码请登录后点击上方下载按钮下载查看