Welcome to svelte-range-slider-pips Discussions!

[simeydotme]

👋 Discuss!

Enabling this feature to move questions / ideas / support for the Component (either Svelte, or Vanilla, or Web Components) and Testing out of the Issues area. Please feel free to;

• Ask questions about functionality / how to.
• Share ideas for improvements / new features.
• Engage with other users and share use-cases (like a showcase).
• Welcome others and be open-minded. Remember that this is a community we
  build together 💪.

Let's see how this goes! :)

[amandakoster]

Hello, thank you for such a great component with equally great documentation! I am wondering how you printed the range values in your Example page: https://simeydotme.github.io/svelte-range-slider-pips/#svelte-range-slider--pips. Even better where is the code for this pageL Examples.svelte so I can figure it out myself?

[simeydotme]

https://github.com/simeydotme/svelte-range-slider-pips/blob/gh-pages/src/

^^ So the Docs are on the gh-pages branch, so glad you're interested to figure out ! :)
The main file is a .svx which is like a markdown file with code interspersed. And the code for the values-printing is in the Example.svelte.

Let me know if you struggle at all!

[simeydotme]

I realise the component structure in the gh-pages branch is a little muddy, so if you want a shortcut here's an example of values being displayed;

https://svelte.dev/repl/f7bcc48c34b745c2b6b0d622410b2ec6?version=3.49.0

• If you're using the slider with Vanilla / jQuery, you might need to use the onchange event (example on codepen)
• If you're using it with React/Vue, I'm not sure quite how you can bind reactive values; so if you figure it out, please share back here! :)

[amandakoster]

Found it, thank you!

[amandakoster]

Hello, I am running into an issue. I am trying to use this component for a date range slider, so the user can choose a range of dates within a max range (and then search those dates). My issue is that once I format the unix time stamp to a human readable date, the slider crashes because it does not know how to read a date (ex., 1/1/2010) vs. a number (123456)

Example:
https://svelte.dev/repl/9be23a7f10aa417d8b530ee8aa03cbae?version=3.43.1

[simeydotme]

Also, do we need to add everything in RangePips.svelte and RangeSlider.svelte from the Repl into my code or does that come with the package?

If you use import RangeSlider from "./RangeSlider.svelte"; and have done npm install --save-dev svelte-range-slider-pips then I think you should be fine :) (ie: https://svelte.dev/repl/030797781fd64ad88302d1343f5b2c43?version=3.49.0) .. but again I'm not sure what your environment/setup is ... this is just the regular NPM / Svelte / Package method

[amandakoster]

This is a huge help! Thank you. I will try those out!

[amandakoster]

IT WORKED!!!!! You are amazing!!! Thank you so much!

[simeydotme]

yay!

[simeydotme]

@amandakoster may I ask; how/where did you hear about this component? and would you consider adding a ⭐ ... it helps gain exposure :)