motion-slider {
    position: relative;
    width: 100%;
    padding-bottom: 12px;
    display: block;
}

    motion-slider .slider-container {
        position: relative;
        width: calc(100% - 114px);
        display: inline-block;
        vertical-align: middle;
    }

    motion-slider .input-container {
        position: relative;
        width: 110px;
        display: inline-block;
        vertical-align: middle;
        padding-left: 10px;
    }

        motion-slider .input-container .slider-text-input {
            height: 32px !important;
            text-align: right;
            margin: 0 0 3px 0 !important;
        }

    motion-slider .slider-container .slider-input {
        -webkit-appearance: none;
        position: relative;
        height: 15px;
        width: 100%;
        outline: none;
        border-radius: 6px;
        -ms-touch-action: none;
        touch-action: none;
        box-sizing: border-box;
        user-select: none;
        background-color: transparent;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        z-index: 3;
    }

        motion-slider .slider-container .slider-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 15px;
            height: 15px;
            cursor: -webkit-grab;
            cursor: grab;
            border-radius: 50%;
            background: #04AA6D;
            border: 2px solid rgb(61, 61, 61);
            background-color: #fff;
            z-index: 3;
        }

        motion-slider .slider-container .slider-input:active::-webkit-slider-thumb,
        motion-slider .slider-container .slider-input:focus::-webkit-slider-thumb {
            background-color: rgb(61, 61, 61);
            z-index: 3;
        }

    motion-slider .slider-container .rail {
        position: absolute;
        top: 13px;
        width: 100%;
        height: 4px;
        border-radius: 6px;
        background-color: rgb(219, 219, 219);
        z-index: 1;
    }

    motion-slider .slider-container .track {
        position: absolute;
        top: 13px;
        left: 0;
        height: 4px;
        width: 0%;
        border-radius: 6px;
        background-color: rgb(61, 61, 61);
        z-index: 2;
    }

    motion-slider .slider-container .step {
        position: absolute;
        top: 13px;
        width: 100%;
        height: 4px;
        background: transparent;
    }

        motion-slider .slider-container .step .dot {
            position: absolute;
            bottom: -2px;
            margin-left: -4px;
            width: 3px;
            height: 8px;
            background-color: rgb(219, 219, 219);
            cursor: pointer;
            vertical-align: middle;
            z-index: 1;
        }

            motion-slider .slider-container .step .dot.isActive {
                background-color: rgb(61, 61, 61);
            }

            motion-slider .slider-container .step .dot:nth-child(1) {
                left: 10%;
            }

            motion-slider .slider-container .step .dot:nth-child(2) {
                left: 20%;
            }

            motion-slider .slider-container .step .dot:nth-child(3) {
                left: 30%;
            }

            motion-slider .slider-container .step .dot:nth-child(4) {
                left: 40%;
            }

            motion-slider .slider-container .step .dot:nth-child(5) {
                left: 50%;
            }

            motion-slider .slider-container .step .dot:nth-child(6) {
                left: 60%;
            }

            motion-slider .slider-container .step .dot:nth-child(7) {
                left: 70%;
            }

            motion-slider .slider-container .step .dot:nth-child(8) {
                left: 80%;
            }

            motion-slider .slider-container .step .dot:nth-child(9) {
                left: 90%;
            }

    motion-slider .slider-container .minMaxValues {
        position: relative;
        font-size: 14px;
        font-weight: 400;
        color: #686868;
    }

        motion-slider .slider-container .minMaxValues .value1,
        motion-slider .slider-container .minMaxValues .value2 {
            position: absolute;
            line-height: 0;
        }

        motion-slider .slider-container .minMaxValues .value1 {
            left: 0;
        }

        motion-slider .slider-container .minMaxValues .value2 {
            right: 0;
        }

        motion-slider .slider-container .minMaxValues span {
            display: inline-block;
        }