UPD2: Check the marked answer for the solution. There's a small bug that with transparency on IOS that I came across which may or may not be there in your case. If you are experiencing it too read the comments on the marked answer. Cheers!
UPD: Check the github repo out if you want to see it in context: https://github.com/LitvinenkoD/activity-generator-based-on-Bored-API
Here is the working version on GitHub Pages https://litvinenkod.github.io/activity-generator-based-on-Bored-API/
I'm working on a min/max range selector using
<input type="range">
.
I want the thumbs of the selector to be visually small, but have large clickable area for UX purposes.
This is the visual look I need
And this is the clickable area I want under the hood
I tried using pseudo elements, but ::-moz-range-thumb
and ::-webkit-slider-thumb
are already pseudo elements themselves, so there is no option of adding a hidden pseudo element on top of them.
There is also an option of adding an invisible border and then doing background-clip: padding-box;
, but that changes the functionality of the input form because it treats the thumbs as if they're actually a lot bigger and it affects the way range in between them looks like.
Is there a solution I could use in my project? I'm ok with doing something 50 lines long as long as I can actually implement the functionality I want.
Adding code here:
HTML
<div class="slider">
<input type="range" class="slider__min-selector" min="0" max="10" step="1">
<input type="range" class="slider__max-selector" min="0" max="10" step="1">
<div class="slider__background-range-box">
<div class="slider__range_visualizer"></div>
</div>
</div>
<!-- Adds selected values visualization -->
<div class="range-selector__supporting-text | flexbox-container">
<p class="range-selector__min-text">0</p>
<p class="range-selector__max-text">10</p>
</div>
</div>
CSS
input[type="range"]::-moz-range-thumb{
// Removing standard look
-moz-appearance: none;
border: none;
// Styling
background-color: #F0F0F0;
cursor: pointer;
// Visual size I need
height: 1em;
width: 1em;
border-radius: 50%;
// Needed for the thumb to be clickable
pointer-events: auto;
// I used the line below to demonstrate
// the clickable area size I need
border: 10px solid transparent;
// Adding this element allows me to hide
// the border, but the browser treats
// the element as it was actually larger
background-clip: padding-box;
}
JS
export class RangeSelector{
constructor(range_selector_min_tip, range_selector_max_tip, range_visualizer, current_range, sliders_min_gap, range_selector_min_text_visualizer, text_max){
this.range_selector_min_tip = range_selector_min_tip
this.range_selector_max_tip = range_selector_max_tip
this.range_visualizer = range_visualizer
// This array dynamically updates and always stores the value of min and max selectors
this.current_range = current_range
// Minimum acceptable distance between selectors
this.min_selectors_gap = sliders_min_gap
this.range_selector_min_text_visualizer = range_selector_min_text_visualizer
this.text_max = text_max
}
// Sets values of the actual tips equal to the values we initialized before
initializeSlider(){
this.range_selector_min_tip.value = this.current_range[0]
this.range_selector_max_tip.value = this.current_range[1]
}
// Updates the colored gap between two slider tips
adjustRangeVisualizer(){
const left = this.current_range[0] * 10
const right = 100 - this.current_range[1] * 10
this.range_visualizer.style.left = left + "%"
this.range_visualizer.style.right = right + "%"
}
updateRangeText(){
this.range_selector_min_text_visualizer.innerText = this.range_selector_min_tip.value
this.text_max.innerText = this.range_selector_max_tip.value
}
}
I found a mostly-CSS way: use radial-gradient()
to create a thumb and modify its position based on the value of the <input>
.
input[type="range"]::-webkit-slider-thumb {
height: var(--touch-size);
width: var(--touch-size);
background: radial-gradient(
circle at
calc(
(100% - var(--thumb-size)) / 10 * var(--value) +
var(--thumb-size) / 2
)
50%,
#f0f0f0 calc(var(--thumb-size) / 2),
transparent calc(var(--thumb-size) / 2)
);
}
A bit of JS is needed so as to modify the inline custom property:
inputs.forEach((element, isMax) => {
element.addEventListener('input', () => {
element.style.setProperty('--value', element.value);
});
});
Try it:
const visualizer = document.querySelector('.slider__range_visualizer');
const inputs = document.querySelectorAll('input[type="range"]');
inputs.forEach((element, isMax) => {
element.addEventListener('input', () => {
const value = element.value;
element.style.setProperty('--value', value);
const property = isMax ? 'right' : 'left';
const percentage = (isMax ? 10 - value : value) * 10;
visualizer.style[property] = percentage + '%';
});
});
:root {
--thumb-size: 20px;
--touch-size: 70px;
}
input[type="range"]::-webkit-slider-thumb {
height: var(--touch-size);
width: var(--touch-size);
background: radial-gradient(
circle at
calc(
(100% - var(--thumb-size)) / 10 * var(--value) +
var(--thumb-size) / 2
)
50%,
#f0f0f0 calc(var(--thumb-size) / 2),
transparent calc(var(--thumb-size) / 2)
);
/* Just to visualize the actual size */
outline: 1px solid black;
}
input[type="range"]::-moz-range-thumb {
height: var(--touch-size);
width: var(--touch-size);
background: radial-gradient(
circle at
calc(
(100% - var(--thumb-size)) / 10 * var(--value) +
var(--thumb-size) / 2
)
50%,
#f0f0f0 calc(var(--thumb-size) / 2),
transparent calc(var(--thumb-size) / 2)
);
/* Just to visualize the actual size */
outline: 1px solid black;
}
/* Original styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider {
position: relative;
margin: 2em 1em;
width: 500px;
}
.slider input[type="range"] {
position: absolute;
top: 0;
left: 0;
appearance: none;
width: 100%;
background: none;
transform: translateY(-50%);
pointer-events: none;
z-index: 2;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
pointer-events: auto;
cursor: pointer;
border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
appearance: none;
pointer-events: auto;
cursor: pointer;
border-radius: 50%;
}
.slider__background-range-box,
.slider__range_visualizer {
height: .25em;
border-radius: .25em;
}
.slider__background-range-box {
width: 100%;
position: relative;
transform: translateY(-50%);
background-color: grey;
}
.slider__range_visualizer {
position: absolute;
left: 0;
right: 0;
background-color: pink;
}
<div class="slider">
<input type="range" class="slider__min-selector" min="0" max="10" step="1" value="0" style="--value: 0;">
<input type="range" class="slider__max-selector" min="0" max="10" step="1" value="10" style="--value: 10;">
<div class="slider__background-range-box">
<div class="slider__range_visualizer"></div>
</div>
</div>
A note about licensing: The "Original styles" section were copied from your project, which so far has no license. For the purpose of this answer, I must ask you to release the aforementioned code under CC BY-SA 4.0 or a compatible license. If you refuse to do so, you may flag this answer for moderator attention as copyright violation.