ldapmanager/test/scss/entry-form-fields/_range-slider.scss

@use "../colors" as *;
@use "../vars" as *;

$form-range-slider-height: 45px;
// The slider's track, ie., unfilled background
@mixin slider_track {
    width: 100%;
    height: 100%;
    border-radius: $input-field-border-radius; 
}

// The slider's draggable thingy
@mixin slider_thumb {
    display: none;  // Hide the actual thing, since we use a different representation
    appearance: none;
    width: 0;   // Set everything to 0 or none to make sure it's hidden
    height: 0;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0; 
    cursor: pointer;
}

// This gradient makes it look like a progress-bar filled upto `--value`
$form-range-slider-background-gradient:
    linear-gradient(
        to right,
        $user-form-range-slider-filled 0%,	
        $user-form-range-slider-filled var(--value),
        $user-form-range-slider-background  0%
    );

// Range input, styled as a progress bar
@mixin range-slider {
    --value: 50;    // This value is not used except for initialization
    input[type="range"] {
        -webkit-appearance: none; 
        appearance: none;
        width: 100%; 
        height: $form-range-slider-height; 
        border-radius: $input-field-border-radius; 
        background: $form-range-slider-background-gradient; // The effect to make it look like a progress-bar
        border: 1px solid $add-user-input-border-color; 
        cursor: pointer; 
        padding: 0; 
        box-sizing: border-box; 

        // Slider track
        &::-webkit-slider-runnable-track {
            @include slider_track;
        }

        // Firefox
        &::-moz-range-track {
            @include slider_track;
        }

        // Slider thumb
        &::-webkit-slider-thumb {
            -webkit-appearance: none; 
            @include slider_thumb;
        }

        // Firefox
        &::-moz-range-thumb {
            @include slider_thumb;
        }

        &:focus {
            outline: none; 
            border-color: $add-user-input-focus-border-color; 
        }
    }
}