granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix slider range width by adding track wrapper element

Browse source 
The bits-ui Slider.Range component needs to be inside a proper
track element for the range fill to display correctly. Added a
span wrapper with slider-track class and updated styles.
This commit is contained in:
Justin Edmund 2025-12-03 18:45:53 -08:00
parent 23b1d091f5
commit 8ddfe58369
1 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/lib/components/ui/Slider.svelte
View file

@ -49,7 +49,9 @@
{disabled} {disabled}
class="slider {element ?? ''} {className}" class="slider {element ?? ''} {className}"
> >
<SliderPrimitive.Range class="slider-range" /> <span class="slider-track">
<SliderPrimitive.Range class="slider-range" />
</span>
<SliderPrimitive.Thumb index={0} class="slider-thumb" /> <SliderPrimitive.Thumb index={0} class="slider-thumb" />
</SliderPrimitive.Root> </SliderPrimitive.Root>
@ -68,26 +70,24 @@
touch-action: none; touch-action: none;
user-select: none; user-select: none;
// Track
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
height: $unit-half;
background: var(--slider-track-bg, var(--button-bg));
border-radius: $full-corner;
}
&[data-disabled] { &[data-disabled] {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
} }
:global(.slider-track) {
position: relative;
width: 100%;
height: $unit-half;
background: var(--slider-track-bg, var(--button-bg));
border-radius: $full-corner;
overflow: hidden;
}
:global(.slider-range) { :global(.slider-range) {
position: absolute; position: absolute;
height: $unit-half; height: 100%;
background: var(--slider-range-bg, var(--accent-blue)); background: var(--slider-range-bg, var(--accent-blue));
border-radius: $full-corner; border-radius: $full-corner;
} }