feat(slider): add onValueCommitted callback (#1212)

Co-authored-by: Thomas G. Lopes <26071571 [email protected]>
melt-ui · May 29, 2024 · 8e9273a · 8e9273a
1 parent f6e6f76
commit 8e9273a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git a/.changeset/curvy-poems-develop.md b/.changeset/curvy-poems-develop.md
@@ -0,0 1,5 @@
 ---
 '@melt-ui/svelte': minor
 ---
 
 feat(slider): add `onValueCommitted` callback
diff --git a/src/docs/data/builders/slider.ts b/src/docs/data/builders/slider.ts
@@ -72,6 72,11 @@ const builder = builderSchema(BUILDER_NAME, {
  description: 'A callback that is called when the value of the slider changes.',
  see: SEE.CHANGE_FUNCTIONS,
  },
  {
  name: 'onValueCommitted',
  type: '(value: number[]) => void',
  description: 'The callback invoked when the user has committed the value of the slider.',
  },
  ],
  elements: [
  {

diff --git a/src/lib/builders/slider/create.ts b/src/lib/builders/slider/create.ts
@@ -42,7 42,9 @@ const { name } = createElHelpers('slider');
 export const createSlider = (props?: CreateSliderProps) => {
  const withDefaults = { ...defaults, ...props } satisfies CreateSliderProps;
 
- const options = toWritableStores(omit(withDefaults, 'value', 'onValueChange', 'defaultValue'));
  const options = toWritableStores(
  omit(withDefaults, 'value', 'onValueChange', 'onValueCommitted', 'defaultValue')
  );
  const { min, max, step, orientation, dir, disabled, autoSort } = options;
 
  const valueWritable = withDefaults.value ?? writable(withDefaults.defaultValue);
@@ -323,6 325,10 @@ export const createSlider = (props?: CreateSliderProps) => {
  break;
  }
  }
 
  if (withDefaults?.onValueCommitted) {
  withDefaults.onValueCommitted(value.get());
  }
  });
 
  return {
@@ -516,6 522,10 @@ export const createSlider = (props?: CreateSliderProps) => {
 
  const pointerUp = () => {
  isActive.set(false);
 
  if (withDefaults?.onValueCommitted) {
  withDefaults.onValueCommitted(value.get());
  }
  };
 
  const unsub = executeCallbacks(

diff --git a/src/lib/builders/slider/types.ts b/src/lib/builders/slider/types.ts
@@ -27,6 27,11 @@ export type CreateSliderProps = {
  */
  onValueChange?: ChangeFn<number[]>;
 
  /**
  * The callback invoked when the user has committed the value of the slider.
  */
  onValueCommitted?: (value: number[]) => void;
 
  /**
  * The minimum value of the slider.
  *