<script lang="ts" module>
export type ChangeEvent = {
activeHandle: number;
startValue: number;
previousValue: number;
value: number;
values: number[];
};
export type StartEvent = { activeHandle: number; value: number; values: number[] };
export type StopEvent = {
activeHandle: number;
startValue: number;
value: number;
values: number[];
};
export interface RangeSliderProps {
range?: boolean | 'min' | 'max';
onchange?: (event: ChangeEvent) => void;
onstart?: (event: StartEvent) => void;
onstop?: (event: StopEvent) => void;
pushy?: boolean;
min?: number;
max?: number;
ariaLabels?: string[];
precision?: number;
springOptions?: { stiffness: number; damping: number };
id?: string;
prefix?: string;
suffix?: string;
pips?: boolean;
pipstep?: number;
all?: boolean | 'pip' | 'label';
first?: boolean | 'pip' | 'label';
last?: boolean | 'pip' | 'label';
rest?: boolean | 'pip' | 'label';
step?: number;
value?: number;
values?: number[];
vertical?: boolean;
float?: boolean;
reversed?: boolean;
hoverable?: boolean;
disabled?: boolean;
formatter?: (value: number, index: number, percent: number) => string;
handleFormatter?: (value: number, index: number, percent: number) => string;
}
</script>
<script lang="ts">
import { spring } from 'svelte/motion';
import RangePips from './range-pips.svelte';
let {
range = false,
pushy = false,
min = 0,
max = 100,
ariaLabels = [],
precision = 2,
springOptions = { stiffness: 0.15, damping: 0.4 },
id = '',
prefix = '',
suffix = '',
pips = false,
pipstep,
all,
first,
last,
rest,
step = 1,
value = $bindable(0),
values = $bindable([(max + min) / 2]),
vertical = false
| 