rangetouch/docs/src/less/components/range.less

A super tiny library to make input type='range' sliders work better on touch devices

// ==========================================================================
// <input type="range">
// ==========================================================================

// Mixins for components
.range-thumb() {
    position: relative;
    height: @range-thumb-height;
    width: @range-thumb-width;
    background: @range-thumb-bg;
    border: @range-thumb-border;
    border-radius: 100%;
    transition: background 0.3s ease;
    box-shadow: 0 1px 2px fade(@gray-dark, 40%);
    box-sizing: border-box;
}
.range-track() {
    height: @range-track-height;
    background: @range-track-bg;
    border: 0;
    border-radius: (@range-track-height / 2);
    user-select: none;
}

input[type='range'] {
    display: block;
    height: @range-thumb-height;
    width: 100%;
    margin: 0;
    padding: 0;

    appearance: none;
    cursor: pointer;
    border: none;
    background: transparent;

    // Webkit
    &::-webkit-slider-runnable-track {
        .range-track();
    }
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        margin-top: -((@range-thumb-height - @range-track-height) / 2);
        .range-thumb();
    }

    // Mozilla
    &::-moz-range-track {
        .range-track();
    }
    &::-moz-range-thumb {
        .range-thumb();
    }
    &::-moz-focus-outer {
        border: 0;
    }

    // Microsoft
    &::-ms-track {
        height: @range-track-height;
        background: transparent;
        border: 0;
        color: transparent;
    }
    &::-ms-fill-lower,
    &::-ms-fill-upper {
        .range-track();
    }
    &::-ms-thumb {
        .range-thumb();

        // For some reason, Edge uses the -webkit margin above
        margin-top: 0;
    }
    &::-ms-tooltip {
        display: none;
    }

    &:focus {
        .tab-focus();
    }
}