st-range-input {

        .st-range-input-group {
            margin-bottom: 10px;            
        }

        

        .st-range-input {
            display: flex;
            align-items: flex-start;
            margin: var(--st-range-input-margin, 6px 0 20px 0);
            height: var(--st-range-input-height, 20px);
            width: var(--st-range-input-width, 100%);
            overflow: hidden;
        }

        input[type="range"] { 
            -webkit-appearance: none;
            position: relative;
            overflow: hidden;
            width: var(--st-form-range-input-range-width, 100%);
            height: 20px;
            cursor: pointer;
            border-radius: 0; /* iOS */
        }

        ::-webkit-slider-runnable-track {
            background: #ddd;
        }

        /*
        * 1. Set to 0 width and remove border for a slider without a thumb
        */
        ::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px; /* 1 */
            height: 20px;
            background: #fff;
            box-shadow: -100vw 0 0 100vw #428bca;
            border: 2px solid #999; /* 1 */
        }

        ::-moz-range-track {
            height: 20px;
            background: #ddd;
        }

        ::-moz-range-thumb {
            background: #fff;
            height: 20px;
            width: 20px;
            border: 3px solid #999;
            border-radius: 0 !important;
            box-shadow: -100vw 0 0 100vw #428bca;
            box-sizing: border-box;
        }

        ::-ms-fill-lower { 
            background: #428bca;
        }

        ::-ms-thumb { 
            background: #fff;
            border: 2px solid #999;
            height: 20px;
            width: 20px;
            box-sizing: border-box;
        }

        ::-ms-ticks-after { 
            display: none; 
        }

        ::-ms-ticks-before { 
            display: none; 
        }

        ::-ms-track { 
            background: #ddd;
            color: transparent;
            height: 20px;
            border: none;
        }

        ::-ms-tooltip { 
            display: none;
        }

        input[type="range"] + label {
            line-height: var(--st-range-input-line-height, 18px);
            min-width: 40px;
            text-align: center;
            background-color: var(--st-range-input-label-background-color, #3277b3);
            color: var(--st-range-input-label-color, #fff);
            border: 1px solid var(--st-range-input-label-background-color, #3277b3);

        }
}