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.

event name		dispatch values example
change-range	dispatches when the left or right knob position changes. 'key' is same of the own property value 'from' and 'to' are the current values	{ key: 'input1', from: 3, to: 20 }