input[type=range]::-webkit-slider-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } input[type=range]::-moz-range-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } input[type=range]::-ms-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } .myclass::-webkit-slider-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 26px !important; width: 26px !important; border-radius: 50% !important; background: #ffffff !important; cursor: pointer !important; -webkit-appearance: none !important; margin-top: -14px !important; } .myclass::-moz-range-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 26px !important; width: 26px !important; border-radius: 50% !important; background: #ffffff !important; cursor: pointer !important; -webkit-appearance: none !important; margin-top: -14px !important; } .myclass::-ms-thumb { box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border: 1px solid #000000; height: 26px !important; width: 26px !important; border-radius: 50% !important; background: #ffffff !important; cursor: pointer !important; -webkit-appearance: none !important; margin-top: 0px !important; } .myclassskip::-webkit-slider-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } .myclassskip::-moz-range-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } .myclassskip::-ms-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } input[type=range] { -webkit-appearance: none; margin: 18px 0; width: 100%; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #1a8cff; border-radius: 6px; } input[type=range]::-moz-range-track { width: 100%; height: 4px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; background: #1a8cff; border-radius: 6px; } input[type=range]::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-radius: 6px; color: transparent; border-color: transparent; border-width: 12px 0; } input[type=range]::-ms-fill-lower { background: #1a8cff; border-radius: 6px 0 0 6px; } input[type=range]::-ms-fill-upper { background: #1a8cff; border-radius: 0 6px 6px 0; } input[type=range]::-ms-ticks-before { color: transparent; } input[type=range]::-ms-ticks-after { color: transparent; } input[type=range]::-ms-tooltip { display: none; } input[type=range].form-control { border-radius: 1rem; max-width: 100%; min-height: 32.8px; } input[type=range]::-webkit-slider-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } input[type=range]::-moz-range-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } input[type=range]::-ms-thumb { border: 0px; height: 0px; width: 0px; border-radius: 0px; -webkit-appearance: none; } .rs-label { position: relative; transform-origin: center center; display: block; width: 100px; height: 0px; background: transparent; text-align: center; padding-top: 7px; box-sizing: border-box; margin-left: auto; margin-right: auto; font-weight: bold; line-height: normal; font-size: 14px; } .rs-label::after { display: block; font-size: 20px; letter-spacing: 0.07em; margin-top: -2px; } output.bubble { position: absolute; top: -1.5em; } .range_wrapper { position: relative; }