Basic Usage

Minimal Configuration

The most basic example is to provide a min, max and value prop. This will render a Slider with a single handle.

<script>
  import RangeSlider from 'svelte-range-slider-pips';
</script>

<RangeSlider id="useless-slider" />

<script defer src="svelte-range-slider-pips.min.js"></script>

<div id="useless-slider"></div>

<script defer>
  const slider = new RangeSlider({
    target: document.querySelector("#useless-slider")
  });
</script>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import RangeSlider from 'svelte-range-slider-pips';

  const $node = ref(null);
  let MyRangeSlider = ref(null);

  onMounted(() => {
    MyRangeSlider = new RangeSlider({ 
      target: $node.value
    });
  });

  onUnmounted(() => {
    if (MyRangeSlider) {
      MyRangeSlider.$destroy();
    }
  });
</script>

<template>
  <div id="useless-slider" ref="$node"></div>
</template>

import { useEffect, useRef } from 'react';
import RangeSlider from 'svelte-range-slider-pips';

export default function UselessSlider() {
  const nodeRef = useRef(null);
  const sliderRef = useRef(null);

  useEffect(() => {
    sliderRef.current = new RangeSlider({
      target: nodeRef.current
    });

    return () => {
      // Cleanup if needed
      if (sliderRef.current) {
        sliderRef.current.$destroy();
      }
    };
  }, []);

  return <div id='useless-slider' ref={nodeRef}></div>;
}

But this is kind of useless! Unless you just want a pretty UI toy to play with! Because once rendered to the page, there’s no feedback upon interaction.

Binding the values

Typically we would want to be able to use the value of the Slider in our application. This could either be to change another part of the interface in a Rich Internet Application, or to send the value to a server as part of a Form.

So here we will bind the value prop to a value variable and bind the <input> element to the same variable.

<script>
  import RangeSlider from 'svelte-range-slider-pips';
  let value = 10;
</script>

<RangeSlider min={0} max={100} bind:value />

<input type="number" bind:value />

<script defer src="svelte-range-slider-pips.min.js"></script>

<div id="binding-slider"></div>
<input type="number" id="binding-input" value="10" />

<script defer>
  let value = 10;
  const slider = new RangeSlider({
    target: document.querySelector("#binding-slider"),
    props: {
      min: 0,
      max: 100,
      value: value
    }
  });

  const input = document.querySelector("#binding-input");

  slider.$on('change', (e) => {
    value = e.detail.value;
    input.value = value;
  });

  input.addEventListener('change', (e) => {
    value = e.target.valueAsNumber;
    slider.$set({ value: value });
  });
</script>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import RangeSlider from 'svelte-range-slider-pips';

  const value = ref(10);
  const $node = ref(null);
  let MyRangeSlider = ref(null);

  const updateSlider = () => {
    MyRangeSlider.$set({ value: value.value });
  }

  onMounted(() => {
    MyRangeSlider = new RangeSlider({ 
      target: $node.value,
      props: {
        min: 0,
        max: 100,
        value: value.value
      }
    });

    MyRangeSlider.$on('change', (e) => {
      value.value = e.detail.value;
    });
  });

  onUnmounted(() => {
    if (MyRangeSlider) {
      MyRangeSlider.$destroy();
    }
  });
</script>

<template>
  <div id="binding-slider" ref="$node"></div>
  <input type="number" v-model="value" @change="updateSlider" />
</template>

import { useEffect, useRef, useState } from 'react';
import RangeSlider from 'svelte-range-slider-pips';

export default function BasicBinding() {
  const [value, setValue] = useState(10);
  const nodeRef = useRef(null);
  const sliderRef = useRef(null);

  useEffect(() => {
    sliderRef.current = new RangeSlider({
      target: nodeRef.current,
      props: {
        min: 0,
        max: 100,
        value: value
      }
    });

    sliderRef.current.$on('change', (e) => {
      setValue(e.detail.value);
    });

    return () => {
      if (sliderRef.current) {
        sliderRef.current.$destroy();
      }
    };
  }, [value]);

  useEffect(() => {
    if (sliderRef.current) {
      sliderRef.current.$set({ value });
    }
  }, [value]);

  return (
    <div>
      <div id="binding-slider" ref={nodeRef}></div>
      <input 
        type="number" 
        value={value} 
        onChange={(e) => setValue(e.target.valueAsNumber)} 
      />
    </div>
  );
}

Common Setup

The most common use case is to allow a user to select a value from a range of values. Using the special feature of pips to render beside the Slider to hint at the progress. It’s also common to show a float value above the handle to help the user see the exact value they are selecting.

Here; we are binding the values[] prop to a values variable so that the Slider’s value can be used elsewhere in our application.

<script>
  import RangeSlider from 'svelte-range-slider-pips';
  let values = [10, 90];
</script>

<RangeSlider pips float range first=label last=label bind:values />

<script defer src="svelte-range-slider-pips.min.js"></script>

<div id="typical-slider"></div>

<script defer>
  let values = [10, 50];
  const slider = new RangeSlider({
    target: document.querySelector("#typical-slider"),
    props: {
      values: values,
      pips: true,
      float: true,
      range: true,
      first: 'label',
      last: 'label'
    }
  });

  slider.$on('change', (e) => {
    values = e.detail.values;
  });
</script>

<script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import RangeSlider from 'svelte-range-slider-pips';

  const values = ref([10, 50]);
  const $node = ref(null);
  let MyRangeSlider = ref(null);

  onMounted(() => {
    MyRangeSlider = new RangeSlider({ 
      target: $node.value,
      props: {
        values: values.value,
        pips: true,
        float: true,
        first: 'label',
        last: 'label'
      }
    });

    MyRangeSlider.$on('change', (e) => {
      values.value = e.detail.values;
    });
  });

  onUnmounted(() => {
    if (MyRangeSlider) {
      MyRangeSlider.$destroy();
    }
  });
</script>

<template>
  <div ref="$node"></div>
</template>

import { useEffect, useRef, useState } from 'react';
import RangeSlider from 'svelte-range-slider-pips';

export default function TypicalUsage() {
  const [values, setValues] = useState([10, 50]);
  const nodeRef = useRef(null);
  const sliderRef = useRef(null);

  useEffect(() => {
    sliderRef.current = new RangeSlider({
      target: nodeRef.current,
      props: {
        values: values,
        pips: true,
        float: true,
        first: 'label',
        last: 'label'
      }
    });

    sliderRef.current.$on('change', (e) => {
      setValues(e.detail.values);
    });

    return () => {
      if (sliderRef.current) {
        sliderRef.current.$destroy();
      }
    };
  }, [values]);

  return (
    <div ref={nodeRef}></div>
  );
}