rangeslider实现7种不同样式的拖动滑块选择效果代码-html代码-BFW代码库

rangeslider实现7种不同样式的拖动滑块选择效果代码

代码语言：html

所属分类：选择器

代码描述：rangeslider实现7种不同样式的拖动滑块选择效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <style>
        html, * {
            font-family: 'Inter';
            box-sizing: border-box;
        }

        body {
            line-height: 1.6;
            background-image: radial-gradient(circle at center center, rgba(33,33,33,0),rgb(33,33,33)),repeating-linear-gradient(135deg, rgb(33,33,33) 0px, rgb(33,33,33) 1px,transparent 1px, transparent 4px),repeating-linear-gradient(45deg, rgb(56,56,56) 0px, rgb(56,56,56) 5px,transparent 5px, transparent 6px),linear-gradient(90deg, rgb(33,33,33),rgb(33,33,33));
            color: #fff;
        }

        .lead {
            font-size: 1.5rem;
            font-weight: 300;
        }

        .container {
            margin: 150px auto;
            max-width: 960px;
        }

        .btn {
            padding: 1.25rem;
            border: 0;
            border-radius: 3px;
            background-color: #4F46E5;
            color: #fff;
            cursor: pointer;
        }

        #range-slider-2 .range-slider__thumb[data-lower] {
            width: 0;
        }

        #range-slider-2 .range-slider__range {
            border-radius: 6px;
        }

        #range-slider-3 {
            margin: auto;
            height: 200px;
        }

        #range-slider-4 {
            background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23555' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E") #333;
        }

            #range-slider-4.range-slider__range {
                background: #ffbf00;
                transition: height .3s;
            }

            #range-slider-4 .range-slider__thumb {
                background: #faa307;
                transition: transform .3s;
            }

                #range-slider-4 .range-slider__thumb[data-active] {
                    transform: translate(-50%, -50%) scale(1.25);
                }

            #range-slider-4 .range-slider__range[data-active] {
                height: 16px;
            }

        #range-slider-5 {
            height: 16px;
            background: #4b4d61;
        }

            #range-slider-5 .range-slider__range {
                background: #ff4141;
            }

            #range-slider-5 .range-slider__thumb {
                width: 30px;
                height: 30px;
                border-radius: 4px;
            }

                #range-slider-5 .range-slider__thumb[data-lower] {
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath d='M3,5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5M11,7A2,2 0 0,0 9,9V17H11V13H13V17H15V9A2,2 0 0,0 13,7H11M11,9H13V11H11V9Z' /%3E%3C/svg%3E") #ff4141;
                }

                #range-slider-5 .range-slider__thumb[data-upper] {
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M15,10.5V9A2,2 0 0,0 13,7H9V17H13A2,2 0 0,0 15,15V13.5C15,12.7 14.3,12 13.5,12C14.3,12 15,11.3 15,10.5M13,15H11V13H13V15M13,11H11V9H13V11Z' /%3E%3C/svg%3E") #ff4141;
                }

                #range-slider-5 .range-slider__thumb[data-lower][data-active] {
                    animation: rotate-anti-clockwise .9s infinite;
                }

                #range-slider-5 .range-slider__thumb[data-upper][data-active] {
                    animation: rotate-clockwise .9s infinite;
                }

        @keyframes rotate-clockwise {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes rotate-anti-clockwise {
            0% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            100% {
           .........完整代码请登录后点击上方下载按钮下载查看