A Pen by David Scott Kirby.

Firefox-Friendly-Slider-Thumbs.markdown

Firefox-Friendly Slider-Thumbs

An attempt at making "-moz-range-thumb" & "-webkit-slider-thumb" play nice together.

A Pen by David Scott Kirby on CodePen.

License.

index.html

<div class="modal">
  <input class="search" type="text" />
  <input type="range" max="100" step="1" value="1" />
</div>

style.css

:focus {
    outline: 0;   
}
html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    background: #4dceff linear-gradient(rgba(0, 0, 44, 0.8), rgba(0, 0, 23, 1));
    overflow: hidden;    
}
.modal {
    width: 320px;
    margin: 10% auto;
    background-image: linear-gradient(#292929 0%, #111 100%);
    background-position: left top;
    background-repeat: repeat;
    border-radius:10px;
    padding:40px 20px 40px 20px;
    box-shadow: inset 0 1px 1px rgba(255, 255,255, 0.15);
}

input {
    box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
    border: 2px solid #010;
    background: #dedede;
    border-radius: 10px;
    margin: 10px 0 10px 10px;
    padding: 0 5px 0 5px;
    font-family: sans-serif;    
    font-size: 13px;
    height: 12px;
    color: #4f4f4f;
    width: 90%;
}

    input[type="text"] {
        padding: 5px 5px 5px 5px;        
    }
    
    input[type="range"]::-moz-range-track {
        height: 12px;       
        box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
        border: 2px solid #010;
        background: #dedede;
        margin: 0 0 0 0;
        padding: 0 5px 0 5px;
        border-radius: 10px;
    }

    input[type="range"]::-moz-range-thumb {
        -webkit-appearance: none !important;
        height: 24px;
        width: 24px;
        border-radius: 50%;        
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #888;
        background: #f0f0f2;
        background: linear-gradient(#f0f0f2, #c2c3cb);
        box-shadow: 0 5px 8px rgba(0,0,0,.6);
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        height: 24px;
        width: 24px;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #888;
        border-radius: 50%;
        background: #f0f0f2;
        background: linear-gradient(#f0f0f2, #c2c3cb);
        box-shadow: 0 5px 8px rgba(0,0,0,.6);
    }