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.........完整代码请登录后点击上方下载按钮下载查看