simple input range

simple input range

by femfoyou

HTML

<input type="range">

CSS

input[type='range'] {
            -webkit-appearance: none;
            border-radius: 5px;
            box-shadow: inset 0 0 5px #333;
            background-color: #999;
            height: 10px;
            vertical-align: middle;
        }
        input[type='range']::-moz-range-track {
            -moz-appearance: none;
            border-radius: 5px;
            box-shadow: inset 0 0 5px #333;
            background-color: #999;
            height: 10px;
        }
        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            border-radius: 20px;
            background-color: #FFF;
            box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
            border: 1px solid #999;
            height: 20px;
            width: 20px;
        }
        input[type='range']::-moz-range-thumb {
            -moz-appearance: none;
            border-radius: 20px;
            background-color: #FFF;
            box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
            border: 1px solid #999;
            height: 20px;
            width: 20px;
        }