Svelte Sliders

Our Svelte Sliders (customised noUiSlider) refers to a lightweight JavaScript range slider library. The slider offers a wide selection of options and settings and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.
Keep reading our Svelte Sliders examples and learn how to use this plugin.

Initialization

To use it, import it from the components folder

import BaseSlider from "../../../components/BaseSlider.svelte";

Examples

Slider

<script>
let sliders = {
  simple: 50,
  range: [200, 400]
};
</script>

<BaseSlider model={sliders.simple} min={0} value={50} max={100} />

Range slider

<script>
let sliders = {
  simple: 50,
  range: [200, 400]
};
</script>

<BaseSlider
  className="mt-5"
  model={sliders.range}
  min={0}
  value={200}
  max={400} />