input range
Hello guys..,
I have this input range, and i am trying to make the box shadow of the thumb starting from rtl instead of ltr as shown in the image.
Here is the css code:
//input[type="range"] {
color: #9d8e5f;
--thumb-height: 11px;
--track-height: 4px;
--track-color: #e2dbc3;
--thumb-color: #9d8e5f; /* Define separate color for the thumb /
--brightness-hover: 180%;
--brightness-down: 80%;
--clip-edges: 0.125em;
position: relative;
background: transparent;
overflow: hidden;
cursor: pointer;
}
/ === WebKit specific styles === */
input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
transition: all ease 100ms;
height: var(--thumb-height);
}
input[type="range"]::-webkit-slider-runnable-track {
background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
100% calc(var(--track-height) + 1px);
}
input[type="range"]::-webkit-slider-thumb {
--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
--clip-further: calc(100% + 1px);
width: var(--thumb-width, var(--thumb-height));
border-radius: 50%;
position: relative;
background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
50% calc(var(--track-height) + 1px);
background-color: currentColor;
filter: brightness(100%);
--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
100vmax currentColor;
box-shadow: var(--box-fill);
clip-path: polygon(
100% -1px,
var(--clip-edges) -1px,
0 var(--clip-top),
-100vmax var(--clip-top),
-100vmax var(--clip-bottom),
0 var(--clip-bottom),
var(--clip-edges) 100%,
var(--clip-further) var(--clip-further)
);
}
//
10 Replies
Have you tried
direction: rtl; on your input[type=“range”] selector?or just rotate it 180deg and handle the rest in js
Yes i tried both but it doesn’t work
I just want to flip the thumb to start from right instead of left
This is depending on these :
// --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
100vmax currentColor;
box-shadow: var(--box-fill);
clip-path: polygon(
100% -1px,
var(--clip-edges) -1px,
0 var(--clip-top),
-100vmax var(--clip-top),
-100vmax var(--clip-bottom),
0 var(--clip-bottom),
var(--clip-edges) 100%,
var(--clip-further) var(--clip-further)
);
}
//
please make a codepen
transform: rotate(-180deg); worksThank you very much
don't thank me, thank him
Thank you so much @MarkBoots
haha, that's okay