jquery实现一个滑块拖动选择器美化效果代码-html代码-BFW代码库

jquery实现一个滑块拖动选择器美化效果代码

代码语言：html

代码描述：jquery实现一个滑块拖动选择器美化效果代码

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

<html>
<head>
    <style>
        .range {
            position: relative;
        }
        .range input[type=range] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding: 0;
            width: 100%;
            height: 22px;
            cursor: pointer;
            display: block;
        }
        .range input[type=range]:focus {
            outline: none;
        }
        .range input[type=range][disabled] {
            opacity: .3;
            cursor: default;
        }
        .range .rangeslider {
            position: relative;
            height: 22px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .range .rangeslider:before {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
            content: "";
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .range input::-webkit-slider-runnable-track {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
            margin: 11px 0;
        }
        .range input::-moz-range-track {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
            margin: 11px 0;
        }
        .range input::-ms-track {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
            color: transparent;
            padding: 11px 0;
            background: transparent;
            border-color: transparent;
        }
        .range input::-ms-fill-lower,
        .range input::-ms-fill-upper {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
        }
        .range input::-ms-fill-lower {
            background: #60cd18;
        }
        .range .rangeslider-fill-lower {
            background-color: #60cd18;
            border-radius: 100px;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            height: 4px;
            will-change: width;
        }
        .range input::-webkit-slider-thumb {
            box-sizing: border-box;
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
            border: 6px solid #fff;
            height: 24px;
            width: 24px;
            border-radius: 100px;
            background: #333940;
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            margin-top: 2px;
        }
        .range input::-moz-range-thumb {
            box-sizing: border-box;
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
            border: 6px solid #fff;
            height: 24px;
            width: 24px;
            border-radius: 100px;
            background: #333940;
            cursor: pointer;
        }
        .range input::-ms-thumb {
            box-sizing: border-box;
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
            border: 6px solid #fff;
            height: 24px;
            width: 24px;
            border-radius: 100px;
            background: #333940;
            cursor: pointer;
        }
        .range .rangeslider-thumb {
            box-sizing: border-box;
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
            border: 6px solid #fff;
            height: 24px;
            width: 24px;
            border-radius: 100px;
            background: #333940;
            cursor: pointer;
            position: absolute;
            -ms-touch-action: pan-x;
            touch-action: pan-x;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            will-change: left;
        }
        .range .range-output {
            position: absolute;
            .........完整代码请登录后点击上方下载按钮下载查看