I thought that in 2024 we would have had a simple answer to the question "if I have an <input type="range">, how do I apply a different style to the part of the slider before the thumb?"
I've been stumbling on this problem for the past decade, and there seems to be no solution yet.
On Firefox, it's quite straightforward. The `::-moz-range-progress` pseudo-element has been around for a while.
On Chrome and friends, for some sadistic reason that I'm still failing to understand, I still have to resort to ugly workarounds that involve stuff like `clip-path: polygon` on `::-webkit-slider-thumb`, because for some reason cool web engines have decided that web designers shouldn't bother to apply a different style to the progress in a slider.
The style that I've written in the Slider element of Platypush https://git.platypush.tech/platypush/platypush/src/branch/master/platypush/backend/http/webapp/src/components/elements/Slider.vue may be some of the ugliest CSS I've ever written in my life.
Oh, and let's not even get started with the issue of sliders with two thumbs and range values. I've decided to entirely give up writing a cross-browser implementation for that.
Fabio Manganiello /
npub1v7…ukv0u
2024-01-23 11:55:22
Author Public Key
npub1v78mmuz20p6qd6nve30axhqu74avwn4f6z4grhug7755rat7wh3syukv0uPublished at
2024-01-23 11:55:22Event JSON
{
"id": "fbcb987f25f21eadb4ad438a388ec2ce0e625f1cbf856dfa9d183afdd4f1c5b7",
"pubkey": "678fbdf04a787406ea6ccc5fd35c1cf57ac74ea9d0aa81df88f7a941f57e75e3",
"created_at": 1706010922,
"kind": 1,
"tags": [
[
"proxy",
"https://social.platypush.tech/users/blacklight/statuses/111805131799521560",
"activitypub"
]
],
"content": "I thought that in 2024 we would have had a simple answer to the question \"if I have an \u003cinput type=\"range\"\u003e, how do I apply a different style to the part of the slider before the thumb?\"\n\nI've been stumbling on this problem for the past decade, and there seems to be no solution yet.\n\nOn Firefox, it's quite straightforward. The `::-moz-range-progress` pseudo-element has been around for a while.\n\nOn Chrome and friends, for some sadistic reason that I'm still failing to understand, I still have to resort to ugly workarounds that involve stuff like `clip-path: polygon` on `::-webkit-slider-thumb`, because for some reason cool web engines have decided that web designers shouldn't bother to apply a different style to the progress in a slider.\n\nThe style that I've written in the Slider element of Platypush https://git.platypush.tech/platypush/platypush/src/branch/master/platypush/backend/http/webapp/src/components/elements/Slider.vue may be some of the ugliest CSS I've ever written in my life.\n\nOh, and let's not even get started with the issue of sliders with two thumbs and range values. I've decided to entirely give up writing a cross-browser implementation for that.",
"sig": "e6111a2f35d7ad62298bbcea3f6495fc96f21845a4ae6fb60906944628774a4bed508557a6fd2450c8b5cfa3f4692b90efe1ad98a1e6fddd78d1e310b7e322b4"
}