input-range自定义
css jquery
前端
发布日期:   2019-02-01
文章字数:   494
阅读时长:   2 分
阅读次数:  

input-range自定义样式

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            /*去除默认样式*/
            input[type=range] &#123;
                -webkit-appearance: none;
                width: 300px;
                background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
                background-size: 0% 100%;
                border-radius: 10px;
                /*这个属性设置使填充进度条时的图形为圆角*/
            &#125;
            input[type=range]::-webkit-slider-thumb &#123;
                -webkit-appearance: none;
                /*隐藏滑块*/
            &#125;
            /*轨道自定义样式*/
            input[type=range]::-webkit-slider-runnable-track &#123;
                height: 15px;
                border-radius: 10px;
                /*将轨道设为圆角的*/
                box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
                /*轨道内置阴影效果*/
            &#125;
            input[type=range]:focus &#123;
                outline: none;
                /*原始的控件获取到焦点时，会显示包裹整个控件的边框，所以还需要把边框取消。*/
            &#125;
            /*滑块自定义样式*/
            input[type=range]::-webkit-slider-thumb &#123;
                -webkit-appearance: none;
                height: 25px;
                width: 25px;
                margin-top: -5px;
                /*使滑块超出轨道部分的偏移量相等*/
                background: #ffffff;
                border-radius: 50%;
                /*外观设置为圆形*/
                border: solid 0.125em rgba(205, 224, 230, 0.5);
                /*设置边框*/
                box-shadow: 0 .125em .125em #3b4547;
                /*添加底部阴影*/
            &#125;
        </style>
    </head>

    <body>
        <input id="snrPollInterval" type="range" value="10" min="1" max="30">
        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //滑动时的样式
            $.fn.RangeSlider = function(cfg) &#123;
                this.sliderCfg = &#123;
                    min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
                    max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
                    step: cfg && Number(cfg.step) ? cfg.step : 1,
                    callback: cfg && cfg.callback ? cfg.callback : null
                &#125;;
                var $input = $(this);
                var min = this.sliderCfg.min;
                var max = this.sliderCfg.max;
                var step = this.sliderCfg.step;
                var callback = this.sliderCfg.callback;
                $input.attr('min', min).attr('max', max).attr('step', step);
                $input.on("input", function(e) &#123;
                    $input.attr('value', this.value);
                    $input.css('background', 'linear-gradient(to right, #059CFA, #ebeff4 ' + this.value + '%, #ebeff4)');
                    if($.isFunction(callback)) &#123;
                        callback(this);
                    &#125;
                &#125;);
                $input.trigger('input');
            &#125;;
            $('#snrPollInterval').RangeSlider(&#123;
                min: 0,
                max: 100,
                step: 1,
                callback: ''
            &#125;);
        </script>
    </body>
</html>

示例：请点这里

赏

  转载请注明: XMwarrior input-range自定义

  目录