How to create range input with custom shape track without JS - css

Question

I want to create a range input that has a track bar shaped like a triangle, much like many volume inputs appear. Here is an example.
I have read this useful guide to styling the input, but it does not have information on changing the shape of the track bar.
I do not want to use a custom range slider with JS that alters the real input, I want to use the actual range input itself. It should also be mostly cross browser.
How can I accomplish this?

Answer 1

You cannot reliably change the shape of the track bar itself in a cross browser manner, but you can hide the track bar and position an element or image behind it. Here is an example of this being done.
HTML
<input type="range" class="font-size-selector pd-select" id="font_size_selector" min="12" value="20" max="100" step="1">
<span class="triangle-range-background-slider"></span>
CSS
/* Trangle */
.triangle-range-background-slider {
position: relative;
display: block;
margin-top: -27px;
height: 20px;
background: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg');
background-size: 100% auto;
z-index: 1;
}
/* Input to work with triangle */
input[type=range] {
position: relative;
z-index: 3;
}
You could also use a CSS shape instead by removing the background image and placing this logic in there in it's place.
.triange-range-background-slider {
position: relative;
display: block;
margin-top: -27px;
border-top: 10px solid transparent;
border-right: 100px solid #3071a9;
border-bottom: 10px solid transparent;
z-index: 1;
}
Rest of the CSS is the Hide and Thumb from the CSS-Tricks link you provided.
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
Hide Input CSS
/* Hide */
input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}
Thumb Input CSS
/* Thumb */
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
// margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}