Svelte Input Multi Range

Create a new project (If you have not created one yet)

Create new Svelte-kit project create-svelte or Svelte project

Install

npm i svelte-input-multirange

Usage

Import component and custom event.

import InputMultiRange from 'svelte-input-multirange'
import type RangeChanged from 'svelte-input-multirange/range-changed'

When render by using default properties.

<InputMultiRange />

When render with some properties and bind a event handler

function handleChangeRange(e: CustomEvent<RangeChanged>) {
  console.log(e.detail.from)
  console.log(e.detail.to)
}

<div style="height: 48px; width:200px;">
  <InputMultiRange
    key={'1'}
    barHeight={40}
    knobSize={42}
    rangeMin={-100}
    rangeMax={100}
    defaultFrom={10}
    defaultTo={25}
    throttole={10}
    on:range-changed={handleChangeRange}
  />
</div>

NOTE: The display size depends on the parent tag, so wrap it in any tag to control the size. (It is better to set the height slightly larger than the size of the bar or knob.)

Properties

properties are all optional. |name|type|description|default| |---|---|---|---| |key|string|sets value for identification, when using multiple components|empty string| |barHeight|number|height of a bar|20| |knobSize|number|diameter of the range-control knobs|20| |rangeMin|number|available range max value|0| |rangeMax|number|available range min value|100| |defaultFrom|number|initial from value of the range|0| |defaultTo|number|initial to values of the range|100| |rangeMinColor|string|color of range max value (hex)|#00bc9b| |rangeMaxColor|string|color of range max value (hex)|#5eaefd| |useDarkMode|bool|if set to true, color of the basebar will be dark|false| |throttole|number|throttle for a emits event 'change-range'|0|

Events

NOTE: The 'from' and 'to' values are calculated by the actual bar width and range values, so if the width and range are significantly different, it will be difficult to tweak the knobs.