Handle & Label Behavior (always show float)

[stevegiorgi]

How can we make the handle + labels always visible and also have the ability to use the handles + labels as slider controls?

Edit: I've accomplished this by simply updating the CSS:

.rangeHandle .rangeFloat {
    top: -1em;
    transform: translate(-50%, -100%) rotateX(0deg);
    opacity: 1;
}

.rangeFloat {
    pointer-events: auto;
}

[simeydotme]

Edit: I've accomplished this by simply updating the CSS:

.rangeHandle .rangeFloat {
    top: -1em;
    transform: translate(-50%, -100%) rotateX(0deg);
    opacity: 1;
}

.rangeFloat {
    pointer-events: auto;
}

[simeydotme]

Thanks @stevegiorgi for sharing this!
This is a good Recipe to add to the new Documentation!

[kshahkshah]

@simeydotme @stevegiorgi hi there, I'm fairly new to Svelte, so I'm not sure how to reach below the depth of the top level component exposed by the library to apply these styles. Could you help? I tried wrapping this in :global and just of course sticking it in <style> at the bottom of my +page.svelte (using SvelteKit, of course).

When I open chrometools I can manually apply the styles but as is, it has no effect.

[simeydotme]

Have you checked out the new docs, @kshahkshah ?

https://simeydotme.github.io/svelte-range-slider-pips/en/styling/

I'm not sure what you're having issues with, maybe you are having your styles removed because the app doesn't detect the component in your file

You can convert this by putting the stores in a global.CSS file (if you're changing style for ALL your sliders) or, like you said, wrapping your styles in a :global()

You can create a repl if you need more help (see contributing/readme for a forkable repl)

[simeydotme]

This is now explicitly documented; https://simeydotme.github.io/svelte-range-slider-pips/en/examples/float/#always-show-the-floats