Slider Size question... #175
Description
The Slider is not setting the proper width. This problem exists in legacy mode as well as svelte 5. I am using the most up to date version of svelte range slider pips. I set the timeout, because now svelte slider at least knows there is not a width of 0. Anyway, the width it sets now is still to low. This is my code:
<script lang="ts">
import { onMount } from "svelte"
import RangeSlider from "svelte-range-slider-pips"
export let value: number = 0
export let onChange: (value: number) => void
export let min: number = 0
export let max: number = 10
export let step: number = 1
let hours: number = value
let sliderTouched: boolean = false
let rerender: number = 0
onMount(() => {
setTimeout(() => {
rerender += 1
}, 200)
})
function handleChange(e: any) {
console.log(e)
sliderTouched = true
value = e.detail.value
onChange?.(value)
}
</script>
<div class="slider-wrapper">
{#key rerender}
<RangeSlider
class="range-slider"
value={hours}
{min}
{max}
{step}
pips={true}
pipstep={step}
first="label"
rest="pip"
last="label"
float={true}
formatter={(v) => `${v} Std.`}
handleFormatter={(v) => `${v}:00`}
on:change={handleChange}
/>
{/key}
</div>
<style lang="less" global>
@import "../../../../assets/variables.less";
.slider-wrapper {
max-width: 100%;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
.range-slider {
width: 600px;
@media @max-mobile {
width: 320px;
}
--rs-track-background: var(--grey-300);
--rs-track-background-active: var(--text-000);
--rs-handle-background: var(--text-000);
--rs-pip-background: var(--text-000);
--rs-pip-opacity: 0.4;
--rs-label-color: var(--text-000);
--rs-label-font-size: 0.75rem;
--handle-focus: var(--red-100);
}
}
</style>
