I'm new around here. Wanna ask how to stylize fill-lower of input range track (know how to stylize it for -ms- browsers only) to make it work with -webkit-? Here are some of my attempts:
This is how my range track originally looks:
input[type=range] {-webkit-appearance: none; margin: 5.8px 0; background-color: #ac62ff; border-radius: 21.6px;}
input[type=range]:focus {outline: none;}
input[type=range]::-webkit-slider-runnable-track {cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}
input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none; margin-top: -7.8px; position: relative;}
input[type=range]:focus::-webkit-slider-runnable-track {background: #b16cff;}
input[type=range]::-moz-range-track {width: 100%; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}
input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}
input[type=range]::-ms-track {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;}
input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}
input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}
input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78); border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; }
input[type=range]:focus::-ms-fill-lower {background: #ac62ff;}
input[type=range]:focus::-ms-fill-upper {background: #b16cff;}
/* Track */
input[type=range]::-webkit-slider-runnable-track {height: 6.4px;}
input[type=range]::-moz-range-track {height: 6.4px;}
input[type=range]::-ms-track {height: 6.4px;}
/* Thumb */
input[type=range]::-webkit-slider-thumb {height: 20px; width: 8px;}
input[type=range]::-moz-range-thumb {height: 20px; width: 8px;}
input[type=range]::-ms-thumb {height: 20px; width: 8px;}<input type="range" value="0" min="0" max="100" step="1"/>I'm quite happy with how my slider looks. But I've got a suggestion from one man who said: "Why not to add overflow: hidden to your range track and add these parameters to range thumb: box-shadow: -<your-tack-width-negative-nubmer> 0px 0px <your-track-width-positive-nubmer> <your-color>"
It looks like this:
input[type=range] {-webkit-appearance: none; appearance: none; margin: 5.8px 0; background-color: #ac62ff; border-radius: 21.6px; overflow: hidden; width: 100px;}
input[type=range]:focus {outline: none;}
input[type=range]::-webkit-slider-runnable-track {cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}
input[type=range]::-webkit-slider-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78), -100px 0px 0px 100px green; border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; -webkit-appearance: none; margin-top: -7.8px; position: relative;}
input[type=range]:focus::-webkit-slider-runnable-track {background: #b16cff;}
input[type=range]::-moz-range-track {width: 100%; cursor: pointer; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72); background: #ac62ff; border-radius: 21.6px; border: 1px solid rgba(163, 0, 255, 0.79);}
input[type=range]::-moz-range-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78), -100px 0px 0px 100px green; border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer;}
input[type=range]::-ms-track {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;}
input[type=range]::-ms-fill-lower {background: #a758ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}
input[type=range]::-ms-fill-upper {background: #ac62ff; border: 1px solid rgba(163, 0, 255, 0.79); border-radius: 43.2px; box-shadow: 2.4px 2.4px 6.2px rgba(7, 7, 163, 0.72), 0px 0px 2.4px rgba(8, 8, 187, 0.72);}
input[type=range]::-ms-thumb {box-shadow: 2.4px 2.4px 9.5px rgba(4, 16, 14, 0.78), 0px 0px 2.4px rgba(9, 36, 32, 0.78), -100px 0px 0px 100px green; border: 1.8px solid rgba(0, 0, 6, 0.77); border-radius: 28px; background: #ffff29; cursor: pointer; }
input[type=range]:focus::-ms-fill-lower {background: #ac62ff;}
input[type=range]:focus::-ms-fill-upper {background: #b16cff;}
input[type=range]::-webkit-slider-runnable-track {height: 6.4px;}
input[type=range]::-moz-range-track {height: 6.4px;}
input[type=range]::-ms-track {height: 6.4px;}
/* Thumb */
input[type=range]::-webkit-slider-thumb {height: 20px; width: 8px;}
input[type=range]::-moz-range-thumb {height: 20px; width: 8px;}
input[type=range]::-ms-thumb {height: 20px; width: 8px;}<input type="range" value="0" min="0" max="100" step="1"/>Works quite well, but I'm a bit upset about overflow: hidden for my range track as it clips range thumb and track's shadow also.
My goal:
I want to keep the default styling of my range track (in first code snippet) – I mean with all shadows and that stuff, keep the height for range thumb (as overflow: hidden property clips it). Any way will be appreciated (doesn't matter jQuery or Vanilla JS). I searched a lot about this problem, but I don't know how to apply my range track styling to any of those solutions. Thanks for reading! Hope this question isn't stupid or too large to read.
