.smart-slider-editor {
    input[type="range"] {
        -webkit-appearance: none; // Cache le slider natif
        width: 100%; // Requis pour Gecko
        outline: none;
        background: transparent; // Requis sinon blanc sur Webkit
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

    input[type="range"]:focus {
        // Penser à faire des styles :focus sur les sous élements
    }

    // Settings

    $range-thumb-width: 32px;
    $range-thumb-height: 32px;
    $range-thumb-border: 0;
    $range-thumb-radius: 32px;
    $range-thumb-background: var(--smart-primary);
    $range-thumb-background-size: 18px 12px;
    $range-thumb-shadow: 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 2px rgba(0, 0, 20, 0.1);
    $range-thumb-shadow-focus: 0 0 1px rgba(0, 0, 0, 0.06),
    0 4px 2px rgba(0, 0, 20, 0.06),
    0 4px 12px rgba(0, 0, 20, 0.25);
    $range-thumb-transition: box-shadow 0.2s;

    $range-track-height: 8px;
    $range-track-border: 0;
    $range-track-radius: 8px;
    $range-track-background: #fff;
    $range-track-shadow: 0 0 0 1px rgba(204, 204, 204, 0.25);
    $range-track-shadow-focus: 0 0 0 1px rgba(204, 204, 204, 0.75);



    // Styler la poignée

    // Webkit / Blink
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        // cursor: pointer;
        width: $range-thumb-width;
        height: $range-thumb-width;
        border: $range-thumb-border;
        border-radius: $range-thumb-radius;
        margin-top: ($range-thumb-height - $range-track-height) * -0.5; // Requis par Webkit. Auto sur Gecko et IE
        background: $range-thumb-background;
        background-size: $range-thumb-background-size;
        box-shadow: $range-thumb-shadow;
        transition: $range-thumb-transition;
    }

    input[type="range"]:focus::-webkit-slider-thumb {
        box-shadow: $range-thumb-shadow-focus;
    }

    // Gecko
    input[type="range"]::-moz-range-thumb {
        // cursor: pointer;
        width: $range-thumb-width;
        height: $range-thumb-height;
        border: $range-thumb-border;
        border-radius: $range-thumb-radius;
        background: $range-thumb-background;
        background-size: $range-thumb-background-size;
        box-shadow: $range-thumb-shadow;
        transition: $range-thumb-transition;
    }

    input[type="range"]:focus::-moz-range-thumb {
        box-shadow: $range-thumb-shadow-focus;
    }



    // Styling the track

    // Webkit / Blink
    input[type="range"]::-webkit-slider-runnable-track {
        // cursor: pointer;
        width: 100%;
        height: $range-track-height;
        border: $range-track-border;
        border-radius: $range-track-radius;
        background: $range-track-background;
        box-shadow: $range-track-shadow;
    }

    input[type="range"]:focus::-webkit-slider-runnable-track {
        box-shadow: $range-track-shadow-focus;
    }

    // Gecko
    input[type="range"]::-moz-range-track {
        // cursor: pointer;
        width: 100%;
        height: $range-track-height;
        border: $range-track-border;
        border-radius: $range-track-radius;
        background: $range-track-background;
        box-shadow: $range-track-shadow;
    }

    input[type="range"]:focus::-moz-range-track {
        box-shadow: $range-track-shadow-focus;
    }
}