.os-slider {
    width: 100%;
    height: 70px;
    display: block;
    position: relative;

    input[type="range"] {
        width: 100%;
        height: 2px;
        appearance: none;
        background-color: #999999;
        outline: none;
        font-family: sans-serif;
        margin-left: 0px;
        margin-right: 0px;

        &:focus {
            outline: none;
        }

        &:hover {
            background-color: #888888;
        }

        &::-webkit-slider-thumb {
            appearance: none;
            width: 8px;
            height: 24px;
            background: rgb(var(--os-primary-color));
            border: 0;
            border-radius: 4px;
            transition: ease all 0.1s;

            &:hover {
                background-color: #171717;
            }

            &:active {
                background-color: #cccccc;
            }
        }

        &::-moz-range-thumb {
            appearance: none;
            width: 8px;
            height: 24px;
            background: rgb(var(--accent-color));
            cursor: pointer;
            border: 0;
            border-radius: 4px;
            transition: ease all 0.1s;

            &:hover {
                background-color: #171717;
            }

            &:active {
                background-color: #cccccc;
            }
        }
    }

    > input[type="range"].has-box-indicator {
        &::-webkit-slider-thumb {
            transform: translateY(-10px) scaleX(-1);
        }

        &::-moz-range-thumb {
            transform: translateY(0px) scaleX(-1);
        }
    }

    &.os-disabled input[type="range"] {
        &::-webkit-slider-thumb {
            background: #cccccc;
        }

        &::-moz-range-thumb {
            background: #cccccc;
        }
    }

    .os-label {
        display: block;
    }

    .os-min-val-label {
        position: absolute;
        left: 0;
        bottom: 0;
        color: #999999;
    }

    .os-max-val-label {
        position: absolute;
        right: 0;
        bottom: 0;
        color: #999999;
    }
}
