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

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

Examples

Slider

100.00


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

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

Range slider

200.00
400.00


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

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