skyquake/framework/widgets/sq-input-range-slider/sq-input-range-slider.scss

@import '../../style/_colors.scss';
$slider-background: rgba(19, 82, 150, 0.2);
$disabled-slider-background: $dark-gray;
//Generates ticks on bar. Not currently used
$slider-background-ticks: repeating-linear-gradient(to right, $slider-background, $slider-background 0%, #fff 0%, #fff 1%, $slider-background 1%, $slider-background 25%);
$thumb-color: rgba(0, 119, 200, 1);
$disabled-thumb-color: $dark-gray;
$track-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
$thumb-height: 50;
$track-height: 3;
$input-margin: 20;
$-webkit-handle-offset: ($track-height - $thumb-height) / 2;

//(thH-ttW) / 2

@mixin thumbStyling {
    box-shadow: $track-shadow;
    border: 0px solid #000000;
    background: $thumb-color;
    box-shadow: 2px 2px 2px 0px #ccc;
    height: $thumb-height + px;
    width: 20px;
    cursor: pointer;
}
@mixin inputTrack {
    width: 100%;
    height: $track-height + px;
    cursor: pointer;
    animate: 0.2s;
}
@mixin infoBase {
    display: flex;
    justify-content: space-between;
}
@mixin sliderBase {
    input[type=range] {
        position:absolute;
        -webkit-appearance: none;
        margin: $input-margin + px 0;
        width: 100%;
        &:focus {
            outline: none;
        }
        &::-webkit-slider-thumb {
            @include thumbStyling;
            -webkit-appearance: none;
            margin-top: $-webkit-handle-offset + px;

        }
        &::-moz-range-thumb {
            @include thumbStyling;
        }
        &::-ms-thumb {
            @include thumbStyling;
        }
        &::-webkit-slider-runnable-track {
            @include inputTrack;
            box-shadow: $track-shadow;
            background: $slider-background;
            border: 0px solid #000101;
        }
        &:focus::-webkit-slider-runnable-track {
            background: $slider-background;
        }
        &::-moz-range-track {
            @include inputTrack;
            box-shadow: $track-shadow;
            background: $slider-background;
            border: 0px solid #000101;
        }
        &::-ms-track {
            @include inputTrack;
            background: transparent;
            border-color: transparent;
            border-width: 39px 0;
            color: transparent;
        }
        &::-ms-fill-lower {
            background: $slider-background;
            border: 0px solid #000101;
            box-shadow: $track-shadow;
        }
        &::-ms-fill-upper {
            background: #ac51b5;
            border: 0px solid #000101;
            box-shadow: $track-shadow;
        }
        &:focus::-ms-fill-lower {
            background: $slider-background;
        }
        &:focus::-ms-fill-upper {
            background: $slider-background;
        }
    }
    &-info {
        @include infoBase
    }
}
.SqRangeInput {
    &--container {
        background:white;
        border: 1px solid #ccc;
    }
    &--horizontal {
        @include sliderBase;
        position: relative;
        height:$thumb-height + px;
        margin: $input-margin / 2 + px;
    }
    &--vertical {
        @include sliderBase;
        position: relative;

        input[type=range] {
            -webkit-appearance: none;
            height: 100%;
            width: $track-height + px;
            transform: rotate(270deg);
            transform-origin: right;
            &::-webkit-slider-thumb {
                box-shadow: -2px 2px 2px 0px #ccc;
            }
            &::-moz-range-thumb {
                box-shadow: -2px 2px 2px 0px #ccc;
            }
            &::-ms-thumb {
                box-shadow: -2px 2px 2px 0px #ccc;
            }
        }
        &-info {
            @include infoBase;

            div {
                transform: translateY(10px) rotate(90deg);
            }
        }
    }
    &.is-disabled {
        input[type=range] {
            &:disabled {
                &::-webkit-slider-thumb {
                    background: $disabled-thumb-color;
                }
                &::-moz-range-thumb {
                    background: $disabled-thumb-color;
                }
                &::-ms-thumb {
                    background: $disabled-thumb-color;
                }
                &::-webkit-slider-runnable-track {
                    background: $disabled-slider-background;
                }
                &:focus::-webkit-slider-runnable-track {
                    background: $disabled-slider-background;
                }
                &::-moz-range-track {
                    background: $disabled-slider-background;
                }
                &::-ms-track {
                }
                &::-ms-fill-upper {
                    background: $disabled-slider-background;
                }
                &::-ms-fill-lower {
                    background: $disabled-slider-background;
                }
                &:focus::-ms-fill-lower {
                    background: $disabled-slider-background;
                }
                &:focus::-ms-fill-upper {
                    background: $disabled-slider-background;
                }
            }
        }
    }
}