html html5输入范围滑块

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html html5输入范围滑块相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <style>
            @import url(http://fonts.googleapis.com/css?family=Raleway);

            body {
                background: #e3e3e3;
                font-family: Railway, sans-serif;
            }
            #wrapper {
                background: white;
                width: 90%;
                min-height: 300px;
                margin: 40px auto;
                padding: 40px;
                border-radius: 5px;
            }
            #output {
                width: 40px;
                display: inline-block;
                margin: 0 15px 0 0;
                padding: 6px 8px;
                text-align: center;
                box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
            }
            #range-slider {
                width: 400px;
            }
            #range-slider::-moz-range-thumb {
                padding: 3px;
            }
            #range-slider:active::-moz-range-thumb {
                background: orange;               
            }

        </style>

    </head>
    <body>
        <div id="wrapper">
            <output id="output"></output>
            <input id="range-slider" type="range">
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        
        <script>
            var max = 17,
                min = 4,
                step = 1,
                output = $('#output').text(min);
            
            $("#range-slider")
                .attr({'max': max, 'min':min, 'step': step,'value': String(min)})
                .on('input change', function() {
                
                    output.text(this.value);
                });
        </script>
    </body>
</html>

以上是关于html html5输入范围滑块的主要内容，如果未能解决你的问题，请参考以下文章

是否可以根据其他表单的输入来更改 HTML5 范围滑块的最小值和最大值？

HTML5：可能有两个输入的滑块？

html5输入类型范围总是指向最小值并且没有在文本输入上获得onChange

html html5滑块范围css

HTML5 滑块在 Chrome 的设备模式下消失

如何在数字处停止 HTML5 范围输入？