Skip to content

Instantly share code, notes, and snippets.

@andreipopovici

andreipopovici/rangeslider.html

Forked from Raminsiach/rangeslider.html
Created December 21, 2015 08:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andreipopovici/2cafce1a1fa9e72acd21 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andreipopovici/2cafce1a1fa9e72acd21 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @Raminsiach Raminsiach created this gist Dec 18, 2015.
    106 changes: 106 additions & 0 deletions rangeslider.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Customized range slider, pure CSS</title>
    <style>
    body {
    background: #f8f8f8;
    }
    .slider {
    width: 302px;
    overflow: hidden;
    padding: 5px 5px;
    }
    .slider input {
    appearance: none;
    -webkit-appearance: none;
    width: 300px;
    height: 6px;
    border-radius: 2px;
    border: 1px solid #ddd;
    outline: none;
    box-shadow: 0 1px 1px #fff, inset 0 1px 1px #ddd;
    }
    .slider input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: #f1f1f1;
    border: 1px solid #ddd;
    box-shadow: 0 0 2px #999;
    position: relative;
    }
    .slider input::-webkit-slider-thumb:before {
    content: '';
    height: 5px;
    position: absolute;
    width: 300px;
    background-color: green;
    right: 20px;
    top: 7px;
    }
    .timeline {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 20px;
    padding-top: 10px;
    counter-reset: step -2;
    }
    .timeline li {
    width: 16.6%;
    float: left;
    height: 10px;
    position: relative;
    padding-left: 10px;
    box-sizing: border-box;
    }
    .timeline li:nth-child(2) {
    padding-left: 18px;
    }
    .timeline li:nth-child(3) {
    padding-left: 24px;
    }
    .timeline li:nth-child(4) {
    padding-left: 30px;
    }
    .timeline li:nth-child(5) {
    padding-left: 36px;
    }
    .timeline li:nth-child(6) {
    padding-left: 42px;
    }
    .timeline li:after {
    content: '';
    width: 1px;
    height: 10px;
    background-color: #999;
    position: absolute;
    }
    .timeline li:before {
    content: counter(step);
    counter-increment: step 2;
    font-size: 10px;
    position: absolute;
    top: -12px;
    margin-left: -2px;
    }

    </style>
    </head>
    <body>
    <div class="slider">
    <ul class="timeline">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <input type="range" min="0" max="10" step="2" value="0">
    </div>
    </body>
    </html>