html5 input range slider

forked from rgdonohue's block: html5 input range slider

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

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="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        
        <script>
            var max = 20,
                min = 7,
                step = 2,
                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>

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js