slider.scss

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&subset=latin-ext');

.slider1_parent {
    padding-bottom: 6px;
    font-family: 'Source Sans Pro', sans-serif;

    .title {
        display: inline;
        line-height: 28px;
        margin: 0 -4px 0 9px;
    }

    .slider1 {
        border: solid 1px #c2c2c2;
        width: 60px;
        padding: 0 3px 0 3px;
        height: 18px;
        vertical-align: top;
        margin: 4px 4px 4px 10px;
    }

    .main_block {

        .groove_parent {
            width: calc(100% - 20px);
            margin: auto;
            position: relative;
            height: 20px;

            .groove {
                position: relative;
                height: 4px;
                background-color: #f5f5f5;
                top: 8px;
                border-radius: 5px;
                border: solid 1px #bcbcbc;
                overflow: hidden;
                cursor: pointer;

                &:hover { filter: invert(3%) }

                .fill {
                    height: 4px;
                    width: 0;
                    background-color: #7ef4ff;
                }
            }

            .rider {
                position: absolute;
                width: 16px;
                height: 16px;
                background-color: #ddd;
                top: 0;
                border-radius: 13px;
                margin: 2px;
                border: solid 0.5px #a2a2a2;
                cursor: pointer;
                left: calc(0% - 11px);
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;

                &:hover { background-color: #d2d2d2 }
                &:active { background-color: #c1c1c1 }
            }
        }

        .slider_range {
            width: calc(100% - 19px);
            border-left: solid 2px #c5c5c5;
            border-right: solid 2px #c5c5c5;
            height: 13px;
            display: block;
            font-size: 14px;
            margin: 4px auto auto;
            color: #848484;

            tr {
                width: 100%;
                display: inline-flex;

                .left {
                    width: 50%;
                    padding: 1px 5px;
                    margin-top: -9px;
                }

                .right {
                    width: 50%;
                    text-align: right;
                    padding: 1px 5px;
                    margin-top: -9px;
                }
            }
        }
    }
}