svelte-range-slider - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

dist/range-pips.svelte.d.ts

@@ -1,23 +0,76 @@
-/** @typedef {typeof __propDef.props}  RangePipsProps */
-/** @typedef {typeof __propDef.events}  RangePipsEvents */
-/** @typedef {typeof __propDef.slots}  RangePipsSlots */
-export default class RangePips extends SvelteComponentTyped<{
-    [x: string]: never;
+export default RangePips;
+type RangePips = SvelteComponent<PipsProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "";
+};
+declare const RangePips: $$__sveltets_2_IsomorphicComponent<{
+    min?: number;
+    max?: number;
+    step?: number;
+    values?: number[];
+    vertical?: boolean;
+    reversed?: boolean;
+    hoverable?: boolean;
+    disabled?: boolean;
+    pipstep?: number;
+    prefix?: string;
+    suffix?: string;
+    focus?: boolean;
+    range?: boolean | "min" | "max";
+    all?: boolean | "pip" | "label";
+    first?: boolean | "pip" | "label";
+    last?: boolean | "pip" | "label";
+    rest?: boolean | "pip" | "label";
+    percentOf: (v: number) => number;
+    fixFloat: (v: number) => number;
+    orientationStart?: "top" | "bottom" | "left" | "right";
+    orientationEnd?: "top" | "bottom" | "left" | "right";
+    formatter?: (v: number, i: number, p: number) => string;
+    moveHandle: (index: number, value: number) => number;
+    normalisedClient: (e: MouseEvent | TouchEvent) => {
+        x: number;
+        y: number;
+    };
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type RangePipsProps = typeof __propDef.props;
-export type RangePipsEvents = typeof __propDef.events;
-export type RangePipsSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+}, {}, {}, "">;
+type PipsProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    values?: number[];
+    vertical?: boolean;
+    reversed?: boolean;
+    hoverable?: boolean;
+    disabled?: boolean;
+    pipstep?: number;
+    prefix?: string;
+    suffix?: string;
+    focus?: boolean;
+    range?: boolean | "min" | "max";
+    all?: boolean | "pip" | "label";
+    first?: boolean | "pip" | "label";
+    last?: boolean | "pip" | "label";
+    rest?: boolean | "pip" | "label";
+    percentOf: (v: number) => number;
+    fixFloat: (v: number) => number;
+    orientationStart?: "top" | "bottom" | "left" | "right";
+    orientationEnd?: "top" | "bottom" | "left" | "right";
+    formatter?: (v: number, i: number, p: number) => string;
+    moveHandle: (index: number, value: number) => number;
+    normalisedClient: (e: MouseEvent | TouchEvent) => {
+        x: number;
+        y: number;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
 };
-export {};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}

dist/range-slider.svelte.d.ts

@@ -1,23 +0,526 @@
-/** @typedef {typeof __propDef.props}  RangeSliderProps */
-/** @typedef {typeof __propDef.events}  RangeSliderEvents */
-/** @typedef {typeof __propDef.slots}  RangeSliderSlots */
-export default class RangeSlider extends SvelteComponentTyped<{
-    [x: string]: never;
+export default RangeSlider;
+type RangeSlider = SvelteComponent<RangeSliderProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "values" | "value";
+};
+declare const RangeSlider: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * Range style options
+     * ---
+     * `false` - no range styling
+     * `true`  - styles like a range with `min` and `max`
+     * `min`   - styles like a range going from `min` to `value`
+     * `max`   - styles like a range going from `value` to `max`
+     * ---
+     * Default = `false`.
+     */
+    range?: boolean | "min" | "max";
+    /**
+     * Event handler for when the slider value changes
+     * ---
+     * ChangeEvent.[activeHandle]  - Index of the active handle
+     * ChangeEvent.[startValue]    - Value of the slider when the user started interaction
+     * ChangeEvent.[previousValue] - Previous value of the active handle
+     * ChangeEvent.[value]         - Current value of the active handle
+     * ChangeEvent.[values]        - The bound values array
+     */
+    onchange?: (event: {
+        activeHandle: number;
+        startValue: number;
+        previousValue: number;
+        value: number;
+        values: number[];
+    }) => void;
+    /**
+     * Event handler for when the user starts interacting with the slider
+     * ---
+     * event.[activeHandle]  - Index of the active handle
+     * event.[value]         - Current value of the active handle
+     * event.[values]        - The bound values array
+     */
+    onstart?: (event: {
+        activeHandle: number;
+        value: number;
+        values: number[];
+    }) => void;
+    /**
+     * Event handler for when the user stops interacting with the slider
+     * ---
+     * event.[activeHandle] - Index of the active handle
+     * event.[startValue]   - Value of the slider when the user started interaction
+     * event.[value]        - Current value of the active handle
+     * event.[values]       - The bound values array
+     */
+    onstop?: (event: {
+        activeHandle: number;
+        startValue: number;
+        value: number;
+        values: number[];
+    }) => void;
+    /**
+     * If `range` is `true`, then this determines if the handles should push each other along.
+     * Default = `false`. (the handles will block each other by default).
+     */
+    pushy?: boolean;
+    /**
+     * Minimum value for the slider. Should be set lower than `max`.
+     * Default = 0
+     */
+    min?: number;
+    /**
+     * Maximum value for the slider. Should be set higher than `min`.
+     * Default = 100
+     */
+    max?: number;
+    /**
+     * An array of strings to use for the aria-label attribute on the handles.
+     * Note: The array should be the same length as the values array.
+     * Default = []
+     */
+    ariaLabels?: string[];
+    /**
+     * Sets the floating point precision for the slider values.
+     * Default = 2
+     */
+    precision?: number;
+    /**
+     * Stiffness and damping options for the svelte motion spring.
+     * Set both to 1 for no spring effect.
+     * Default = { [stiffness]: 0.15, [damping]: 0.4  }
+     * ---
+     * See [Spring Documentation](https://learn.svelte.dev/tutorial/springs) for more info
+     */
+    springOptions?: {
+        stiffness: number;
+        damping: number;
+    };
+    /**
+     * Sets the id attribute for the slider element.
+     * Default = ''
+     */
+    id?: string;
+    /**
+     * String to prepend to all values
+     * Default = ''
+     * ---
+     * Use {@link RangeSliderProps.formatter} for more complicated formatting
+     */
+    prefix?: string;
+    /**
+     * String to append to all values
+     * Default = ''
+     * ---
+     * Use {@link RangeSliderProps.formatter} for more complicated formatting
+     */
+    suffix?: string;
+    /**
+     * Whether to show pips/notches on the slider.
+     * The pips will be rendered at the pipstep value.
+     * Pips can be styled as necessary, but by default sit below the slider like a gauge.
+     * ---
+     * Default = `false`
+     */
+    pips?: boolean;
+    /**
+     * Every nth step to show a pip for.
+     * This has multiple defaults depending on min, max and step properties.
+     * A sensible default is chosen, but can be overridden.
+     * Note: Value should be positive
+     * ---
+     * Default = 1
+     */
+    pipstep?: number;
+    /**
+     * Whether to show a pip *for every value*.
+     * ---
+     * `false` - all values in the slider will not have a pip or label
+     * `true`  - all values in the slider will have a pip and label
+     * "pip"   - a pip (only) will be shown for all values
+     * "label" - label (and pip) is shown on all values
+     * ---
+     * Default = `false`
+     */
+    all?: boolean | "pip" | "label";
+    /**
+     * Whether to show a pip *for the first value on the slider*.
+     * ---
+     * `false` - The first value will not have a pip or label
+     * `true`  - The first value will have a pip and label
+     * "pip"   - a pip (only) will be shown for the first value
+     * "label" - label (and pip) is shown for the first values
+     * ---
+     * Default = `false`
+     */
+    first?: boolean | "pip" | "label";
+    /**
+     * Whether to show a pip *for the last value on the slider*.
+     * ---
+     * `false` - The last value will not have a pip or label
+     * `true`  - The last value will have a pip and label
+     * "pip"   - a pip (only) will be shown for the last value
+     * "label" - label (and pip) is shown for the last values
+     * ---
+     * Default = `false`
+     */
+    last?: boolean | "pip" | "label";
+    /**
+     * Whether to show a pip *for all values except first and last values*.
+     * ---
+     * `false` - The middle values will not have a pip or label
+     * `true`  - The middle values will have a pip and label
+     * "pip"   - a pip (only) will be shown for the middle values
+     * "label" - label (and pip) is shown for middle values
+     * ---
+     * Default = `false`
+     */
+    rest?: boolean | "pip" | "label";
+    /**
+     * Every `nth` *value to allow handle to stop at*.
+     * For example, if the step is `5`, then the handle will only stop at `5`, `10`, `15`, etc.
+     * Should be a positive value.
+     * Default = 1
+     */
+    step?: number;
+    /**
+     * Single value to apply on the Slider.
+     * Under the hood, the value is stored in an array.
+     * **Must be used with `bind:value`**.
+     * **Value must be defined with `$state()` rune**.
+     * **Must be a single value with `$state()` rune**.
+     */
+    value?: number;
+    /**
+     * Array of values to apply on the Slider.
+     * **Must be used with `bind:values`**.
+     * **Values must be defined with `$state()`**.
+     *
+     * If multiple values are provided, multiple handles will be rendered.
+     * Note: A slider with `range` property can only have two values.
+     * Default = `[`50`]`
+     * ---
+     * Example:
+     * ```svelte
+     * let values = $state([10, 20, 30])
+     *
+     * <RangeSlider bind:values />
+     * ```
+     */
+    values?: number[];
+    /**
+     * Make the slider render vertically (lower value on bottom)
+     * Default = `false`
+     */
+    vertical?: boolean;
+    /**
+     * Set true to add a floating label above focussed handles.
+     * This is good for displaying the current value of the Slider while interacting with it.
+     * Default = `false`
+     */
+    float?: boolean;
+    /**
+     * Reverses the orientation of `min`/`max` values
+     * Default = `false`
+     */
+    reversed?: boolean;
+    /**
+     * Whether hover styles are enabled for both handles and pips/values
+     * Default = `true`
+     */
+    hoverable?: boolean;
+    /**
+     * Determine if the Slider is disabled, or enabled
+     * Default = `false`
+     */
+    disabled?: boolean;
+    /**
+     * A function to format the value of the slider.
+     * The function should return a string.
+     * ---
+     * Parameters:
+     * value: `number`   - The current value of the handle
+     * index: `number`   - The index of the handle
+     * percent: `number` - The percentage of the handle along the slider
+     * ---
+     * Default = (v) => v
+     */
+    formatter?: (value: number, index: number, percent: number) => string;
+    /**
+     * A function to re-format values on the handle/float before they are displayed.
+     * Defaults to the same function given to the formatter property.
+     * ---
+     * Parameters:
+     * value: `number`   - The current value of the handle
+     * index: `number`   - The index of the handle
+     * percent: `number` - The percentage of the handle along the slider
+     * ---
+     * Default = (v) => v
+     */
+    handleFormatter?: (value: number, index: number, percent: number) => string;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type RangeSliderProps = typeof __propDef.props;
-export type RangeSliderEvents = typeof __propDef.events;
-export type RangeSliderSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+}, {}, {}, "values" | "value">;
+type RangeSliderProps = {
+    /**
+     * Range style options
+     * ---
+     * `false` - no range styling
+     * `true`  - styles like a range with `min` and `max`
+     * `min`   - styles like a range going from `min` to `value`
+     * `max`   - styles like a range going from `value` to `max`
+     * ---
+     * Default = `false`.
+     */
+    range?: boolean | "min" | "max";
+    /**
+     * Event handler for when the slider value changes
+     * ---
+     * ChangeEvent.[activeHandle]  - Index of the active handle
+     * ChangeEvent.[startValue]    - Value of the slider when the user started interaction
+     * ChangeEvent.[previousValue] - Previous value of the active handle
+     * ChangeEvent.[value]         - Current value of the active handle
+     * ChangeEvent.[values]        - The bound values array
+     */
+    onchange?: (event: {
+        activeHandle: number;
+        startValue: number;
+        previousValue: number;
+        value: number;
+        values: number[];
+    }) => void;
+    /**
+     * Event handler for when the user starts interacting with the slider
+     * ---
+     * event.[activeHandle]  - Index of the active handle
+     * event.[value]         - Current value of the active handle
+     * event.[values]        - The bound values array
+     */
+    onstart?: (event: {
+        activeHandle: number;
+        value: number;
+        values: number[];
+    }) => void;
+    /**
+     * Event handler for when the user stops interacting with the slider
+     * ---
+     * event.[activeHandle] - Index of the active handle
+     * event.[startValue]   - Value of the slider when the user started interaction
+     * event.[value]        - Current value of the active handle
+     * event.[values]       - The bound values array
+     */
+    onstop?: (event: {
+        activeHandle: number;
+        startValue: number;
+        value: number;
+        values: number[];
+    }) => void;
+    /**
+     * If `range` is `true`, then this determines if the handles should push each other along.
+     * Default = `false`. (the handles will block each other by default).
+     */
+    pushy?: boolean;
+    /**
+     * Minimum value for the slider. Should be set lower than `max`.
+     * Default = 0
+     */
+    min?: number;
+    /**
+     * Maximum value for the slider. Should be set higher than `min`.
+     * Default = 100
+     */
+    max?: number;
+    /**
+     * An array of strings to use for the aria-label attribute on the handles.
+     * Note: The array should be the same length as the values array.
+     * Default = []
+     */
+    ariaLabels?: string[];
+    /**
+     * Sets the floating point precision for the slider values.
+     * Default = 2
+     */
+    precision?: number;
+    /**
+     * Stiffness and damping options for the svelte motion spring.
+     * Set both to 1 for no spring effect.
+     * Default = { [stiffness]: 0.15, [damping]: 0.4  }
+     * ---
+     * See [Spring Documentation](https://learn.svelte.dev/tutorial/springs) for more info
+     */
+    springOptions?: {
+        stiffness: number;
+        damping: number;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+    /**
+     * Sets the id attribute for the slider element.
+     * Default = ''
+     */
+    id?: string;
+    /**
+     * String to prepend to all values
+     * Default = ''
+     * ---
+     * Use {@link RangeSliderProps.formatter} for more complicated formatting
+     */
+    prefix?: string;
+    /**
+     * String to append to all values
+     * Default = ''
+     * ---
+     * Use {@link RangeSliderProps.formatter} for more complicated formatting
+     */
+    suffix?: string;
+    /**
+     * Whether to show pips/notches on the slider.
+     * The pips will be rendered at the pipstep value.
+     * Pips can be styled as necessary, but by default sit below the slider like a gauge.
+     * ---
+     * Default = `false`
+     */
+    pips?: boolean;
+    /**
+     * Every nth step to show a pip for.
+     * This has multiple defaults depending on min, max and step properties.
+     * A sensible default is chosen, but can be overridden.
+     * Note: Value should be positive
+     * ---
+     * Default = 1
+     */
+    pipstep?: number;
+    /**
+     * Whether to show a pip *for every value*.
+     * ---
+     * `false` - all values in the slider will not have a pip or label
+     * `true`  - all values in the slider will have a pip and label
+     * "pip"   - a pip (only) will be shown for all values
+     * "label" - label (and pip) is shown on all values
+     * ---
+     * Default = `false`
+     */
+    all?: boolean | "pip" | "label";
+    /**
+     * Whether to show a pip *for the first value on the slider*.
+     * ---
+     * `false` - The first value will not have a pip or label
+     * `true`  - The first value will have a pip and label
+     * "pip"   - a pip (only) will be shown for the first value
+     * "label" - label (and pip) is shown for the first values
+     * ---
+     * Default = `false`
+     */
+    first?: boolean | "pip" | "label";
+    /**
+     * Whether to show a pip *for the last value on the slider*.
+     * ---
+     * `false` - The last value will not have a pip or label
+     * `true`  - The last value will have a pip and label
+     * "pip"   - a pip (only) will be shown for the last value
+     * "label" - label (and pip) is shown for the last values
+     * ---
+     * Default = `false`
+     */
+    last?: boolean | "pip" | "label";
+    /**
+     * Whether to show a pip *for all values except first and last values*.
+     * ---
+     * `false` - The middle values will not have a pip or label
+     * `true`  - The middle values will have a pip and label
+     * "pip"   - a pip (only) will be shown for the middle values
+     * "label" - label (and pip) is shown for middle values
+     * ---
+     * Default = `false`
+     */
+    rest?: boolean | "pip" | "label";
+    /**
+     * Every `nth` *value to allow handle to stop at*.
+     * For example, if the step is `5`, then the handle will only stop at `5`, `10`, `15`, etc.
+     * Should be a positive value.
+     * Default = 1
+     */
+    step?: number;
+    /**
+     * Single value to apply on the Slider.
+     * Under the hood, the value is stored in an array.
+     * **Must be used with `bind:value`**.
+     * **Value must be defined with `$state()` rune**.
+     * **Must be a single value with `$state()` rune**.
+     */
+    value?: number;
+    /**
+     * Array of values to apply on the Slider.
+     * **Must be used with `bind:values`**.
+     * **Values must be defined with `$state()`**.
+     *
+     * If multiple values are provided, multiple handles will be rendered.
+     * Note: A slider with `range` property can only have two values.
+     * Default = `[`50`]`
+     * ---
+     * Example:
+     * ```svelte
+     * let values = $state([10, 20, 30])
+     *
+     * <RangeSlider bind:values />
+     * ```
+     */
+    values?: number[];
+    /**
+     * Make the slider render vertically (lower value on bottom)
+     * Default = `false`
+     */
+    vertical?: boolean;
+    /**
+     * Set true to add a floating label above focussed handles.
+     * This is good for displaying the current value of the Slider while interacting with it.
+     * Default = `false`
+     */
+    float?: boolean;
+    /**
+     * Reverses the orientation of `min`/`max` values
+     * Default = `false`
+     */
+    reversed?: boolean;
+    /**
+     * Whether hover styles are enabled for both handles and pips/values
+     * Default = `true`
+     */
+    hoverable?: boolean;
+    /**
+     * Determine if the Slider is disabled, or enabled
+     * Default = `false`
+     */
+    disabled?: boolean;
+    /**
+     * A function to format the value of the slider.
+     * The function should return a string.
+     * ---
+     * Parameters:
+     * value: `number`   - The current value of the handle
+     * index: `number`   - The index of the handle
+     * percent: `number` - The percentage of the handle along the slider
+     * ---
+     * Default = (v) => v
+     */
+    formatter?: (value: number, index: number, percent: number) => string;
+    /**
+     * A function to re-format values on the handle/float before they are displayed.
+     * Defaults to the same function given to the formatter property.
+     * ---
+     * Parameters:
+     * value: `number`   - The current value of the handle
+     * index: `number`   - The index of the handle
+     * percent: `number` - The percentage of the handle along the slider
+     * ---
+     * Default = (v) => v
+     */
+    handleFormatter?: (value: number, index: number, percent: number) => string;
 };
-export {};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}

package.json

 {
 	"name": "svelte-range-slider",
-	"version": "0.0.14",
+	"version": "0.0.15",
 	"scripts": {
@@ -26,2 +26,5 @@ "dev": "vite dev",
 	],
+	"peerDependencies": {
+		"svelte": "^5.0.0-next.1"
+	},
 	"devDependencies": {
@@ -28,0 +31,0 @@ "@sveltejs/adapter-auto": "^3.0.0",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

64277

41.57%

Lines of code

659

539.81%

Worsened metrics

Dependency count

1

Infinity%

No dependency changes