From f34071489d83bf1b3e8f3dd4845fe57a0747b358 Mon Sep 17 00:00:00 2001 From: Patrick Davies Date: Fri, 14 Aug 2015 09:45:18 -0400 Subject: [PATCH 1/5] Update nouislider to version 8.* Renamed older definition file and tests to specify legacy version. Removed jQuery dependency. Refactored tests to work with new signature. --- nouislider/nouislider-7.0.10.d.ts | 150 ++++++++++++++++++++++++++ nouislider/nouislider-tests-7.0.10.ts | 75 +++++++++++++ nouislider/nouislider-tests.ts | 69 ++++++------ nouislider/nouislider.d.ts | 83 +++++++------- 4 files changed, 301 insertions(+), 76 deletions(-) create mode 100644 nouislider/nouislider-7.0.10.d.ts create mode 100644 nouislider/nouislider-tests-7.0.10.ts diff --git a/nouislider/nouislider-7.0.10.d.ts b/nouislider/nouislider-7.0.10.d.ts new file mode 100644 index 000000000..e82418d97 --- /dev/null +++ b/nouislider/nouislider-7.0.10.d.ts @@ -0,0 +1,150 @@ +// Type definitions for nouislider v7.0.10 +// Project: https://github.com/leongersen/noUiSlider +// Definitions by: Corey Jepperson +// Definitions: https://github.com/borisyankov/DefinitelyTyped +/// +/// + + +interface noUiSliderInstance extends JQuery{ + /** + * For one-handle sliders, calling .val() will return the value. + * For two-handle sliders, an array[value, value] will be returned. + */ + val(): number | number[]; + /** + * noUiSlider will keep your values within the slider range, which saves you a bunch of validation. + * If you have set the slider to use one handle, simply set it on the slider using the .val() method. + * If you have two handles, pass an array. One-handled sliders will also accept arrays. + * Within an array, you can set a position to null if you want to leave a handle unchanged. + */ + val(value: any): JQuery; //can't enforce number as it breaks extend + /** + * noUiSlider has full support for libLink, which will let you write values to input elements very easily. + * libLink will update the slider if you change an input as well! + */ + Link(target: string, method?: any, format?:any): any; +} + + + +interface noUiSliderOptions { + /** + * The start option sets the number of handles and their start positions, relative to range. + */ + start: number | number[] | number[][]; + /** + * The connect setting can be used to control the bar between the handles, + * or the edges of the slider. Use "lower" to connect to the lower side, + * or "upper" to connect to the upper side. Setting true sets the bar between the handles. + */ + range: Object; + /** + * noUiSlider offers several ways to handle user interaction. + * The range can be set to drag, and handles can move to taps. + * All these effects are optional, and can be enable by adding their keyword to the behaviour option. + * This option accepts a "-" separated list of "drag", "tap", "fixed", "snap" or "none". + */ + connect?: string | boolean; + /** + * When using two handles, the minimum distance between the handles can be set using the margin option. + * The margin value is relative to the value set in 'range'. + * This option is only available on standard linear sliders. + */ + margin?: number; + /** + * The limit option is the oposite of the margin option, + * limiting the maximum distance between two handles. + * As with the margin option, the limit option can only be used on linear sliders. + */ + limit?: number; + /** + * By default, the slider slides fluently. + * In order to make the handles jump between intervals, you can use this option. + * The step option is relative to the values provided to range. + */ + step?: number; + /** + * The orientation setting can be used to set the slider to "vertical" or "horizontal". + * Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. + * You can use any unit you want, including % or px. + */ + orientation?: string; + /** + * By default the sliders are top-to-bottom and left-to-right, + * but you can change this using the direction option, + * which decides where the upper side of the slider is. + */ + direction?: string; + /** + * Set the animate option to false to prevent the slider from animating to a new value with when calling .val(). + */ + animate?: boolean; + /** + * All values on the slider are part of a range. The range has a minimum and maximum value. + */ + behaviour?: string; + /** + * To format the slider output, noUiSlider offers a format option. + * Simply specify to and from functions to encode and decode the values. + * See manual formatting to the right for usage information. + * By default, noUiSlider will format output with 2 decimals. + * Manual formatting can be very tedious, so noUiSlider has support for the wNumb formatting library. + * wNumb offers a wide range of options and provides number validation. + */ + format?: Object | ((...args:any[]) => any); + +} + +interface noUiSliderPipsOptions { + /** + * The range mode uses the slider range to determine where the pips should be. A pip is generated for every percentage specified. + * + * Like range, the steps mode uses the slider range. In steps mode, a pip is generated for every step. + * The filter option can be used to filter the generated pips. + * The filter function must return 0 (no value), 1 (large value) or 2 (small value). + * + * In positions mode, pips are generated at percentage-based positions on the slider. Optionally, the stepped option can be set to true to match the pips to the slider steps. + * + * The count mode can be used to generate a fixed number of pips. As with positions mode, the stepped option can be used. + * + * The values mode is similar to positions, but it accepts values instead of percentages. The stepped option can be used for this mode. + * + */ + mode: string; + /** + * Range Mode: percentage for range mode + * Step Mode: step number for steps + * Positions Mode: percentage-based positions on the slider + * Count Mode: positions between pips + */ + density?: number; + /** + * Step Mode: The filter option can be used to filter the generated pips. + * The filter function must return 0 (no value), 1 (large value) or 2 (small value). + */ + filter?: (...args:any[]) => number; + /** + * format for step mode + * see noUiSlider format + */ + format?: Object; + /** + * + * values for positions and values mode + * number pips for count mode + */ + values?: number | number[]; + /** + * stepped option for positions, values and count mode + */ + stepped?: boolean; + + +} + + +interface JQuery { + noUiSlider(options?: noUiSliderOptions): noUiSliderInstance; + noUiSlider_pips(options?: noUiSliderPipsOptions): noUiSliderInstance; +} \ No newline at end of file diff --git a/nouislider/nouislider-tests-7.0.10.ts b/nouislider/nouislider-tests-7.0.10.ts new file mode 100644 index 000000000..79c6b327f --- /dev/null +++ b/nouislider/nouislider-tests-7.0.10.ts @@ -0,0 +1,75 @@ +/// +/// + +//basic +var basicSlider = $("
").noUiSlider({ + start: 80, + range: { + 'min': 0, + 'max': 10000 + } +}); + +//all options +var allOptions = $("
").noUiSlider({ + start: [ 20, 80 ], + step: 10, + margin: 20, + connect: true, + direction: 'rtl', + orientation: 'vertical', + + // Configure tapping, or make the selected range dragable. + behaviour: 'tap-drag', + + // Full number format support. + format: wNumb({ + mark: ',', + decimals: 1 + }), + + // Support for non-linear ranges by adding intervals. + range: { + 'min': 0, + 'max': 100 + } +}); + + +//PIPS +allOptions.noUiSlider_pips({ + mode: 'steps', + density: 3, + filter: function(){return 1}, + format: wNumb({ + decimals: 2, + prefix: '$' + }) +}); + + +basicSlider.noUiSlider_pips({ + mode: 'values', + values: [50, 552, 4651, 4952, 5000, 7080, 9000], + density: 4, + stepped: true +}); + +//functions + +allOptions.val(); + +// Set one value +basicSlider.val(10); +basicSlider.val([150]); + +// Set the upper handle, +// don't change the lower one. +allOptions.val([null, 14]); + +// Set both slider handles +allOptions.val([13.2, 15.7]); + + +//link +allOptions.Link('lower').to($('')); diff --git a/nouislider/nouislider-tests.ts b/nouislider/nouislider-tests.ts index 3a0da493a..d20a04793 100644 --- a/nouislider/nouislider-tests.ts +++ b/nouislider/nouislider-tests.ts @@ -1,8 +1,11 @@ /// -/// -//basic -var basicSlider = $("
").noUiSlider({ +var testHtmlElement = document.getElementById('test'); + +/** + * Basic + */ +noUiSlider.create(testHtmlElement, { start: 80, range: { 'min': 0, @@ -10,24 +13,26 @@ var basicSlider = $("
").noUiSlider({ } }); -//all options -var allOptions = $("
").noUiSlider({ +/** + * All options + */ +noUiSlider.create(testHtmlElement, { start: [ 20, 80 ], step: 10, margin: 20, connect: true, direction: 'rtl', orientation: 'vertical', - + // Configure tapping, or make the selected range dragable. behaviour: 'tap-drag', - + // Full number format support. format: wNumb({ mark: ',', decimals: 1 }), - + // Support for non-linear ranges by adding intervals. range: { 'min': 0, @@ -35,41 +40,43 @@ var allOptions = $("
").noUiSlider({ } }); - -//PIPS -allOptions.noUiSlider_pips({ +/** + * Pips + */ +noUiSlider.create(testHtmlElement, { + start: 0, + range: { + min: 0, + max: 10 + }, mode: 'steps', density: 3, filter: function(){return 1}, format: wNumb({ decimals: 2, prefix: '$' - }) + }), + pips: { + mode: 'range', + density: 3, + values: [50, 552, 4651, 4952, 5000, 7080, 9000] + } }); - -basicSlider.noUiSlider_pips({ - mode: 'values', - values: [50, 552, 4651, 4952, 5000, 7080, 9000], - density: 4, - stepped: true -}); - -//functions - -allOptions.val(); +/** + * Functions + * Need to cast the HTMLElement as noUiSliderInstance. + */ +// Get value +(testHtmlElement).noUiSlider.get(); // Set one value -basicSlider.val(10); -basicSlider.val([150]); +(testHtmlElement).noUiSlider.set(10); +(testHtmlElement).noUiSlider.set([150]); // Set the upper handle, // don't change the lower one. -allOptions.val([null, 14]); +(testHtmlElement).noUiSlider.set([null, 14]); // Set both slider handles -allOptions.val([13.2, 15.7]); - - -//link -allOptions.Link('lower').to($('')); +(testHtmlElement).noUiSlider.set([13.2, 15.7]); diff --git a/nouislider/nouislider.d.ts b/nouislider/nouislider.d.ts index e82418d97..4ac4b55ee 100644 --- a/nouislider/nouislider.d.ts +++ b/nouislider/nouislider.d.ts @@ -2,77 +2,73 @@ // Project: https://github.com/leongersen/noUiSlider // Definitions by: Corey Jepperson // Definitions: https://github.com/borisyankov/DefinitelyTyped -/// /// - -interface noUiSliderInstance extends JQuery{ +interface noUiSliderStatic { /** - * For one-handle sliders, calling .val() will return the value. + * To create a slider, call noUiSlider.create() with an element and your options. + */ + create(target: HTMLElement, options: noUiSliderOptions); + /** + * To get the current slider value. For one-handle sliders, calling .get() will return the value. * For two-handle sliders, an array[value, value] will be returned. */ - val(): number | number[]; + get(): number | number[]; /** * noUiSlider will keep your values within the slider range, which saves you a bunch of validation. - * If you have set the slider to use one handle, simply set it on the slider using the .val() method. - * If you have two handles, pass an array. One-handled sliders will also accept arrays. - * Within an array, you can set a position to null if you want to leave a handle unchanged. + * If you have configured the slider to use one handle, you can change the current value by passing + * a number to the .set() method. If you have two handles, pass an array. One-handled sliders + * will also accept arrays. Within an array, you can set one position to null + * if you want to leave a handle unchanged. */ - val(value: any): JQuery; //can't enforce number as it breaks extend - /** - * noUiSlider has full support for libLink, which will let you write values to input elements very easily. - * libLink will update the slider if you change an input as well! - */ - Link(target: string, method?: any, format?:any): any; + set(value: number | number[]): void; } - - interface noUiSliderOptions { /** * The start option sets the number of handles and their start positions, relative to range. */ start: number | number[] | number[][]; /** - * The connect setting can be used to control the bar between the handles, + * The connect setting can be used to control the bar between the handles, * or the edges of the slider. Use "lower" to connect to the lower side, * or "upper" to connect to the upper side. Setting true sets the bar between the handles. */ range: Object; /** - * noUiSlider offers several ways to handle user interaction. - * The range can be set to drag, and handles can move to taps. + * noUiSlider offers several ways to handle user interaction. + * The range can be set to drag, and handles can move to taps. * All these effects are optional, and can be enable by adding their keyword to the behaviour option. * This option accepts a "-" separated list of "drag", "tap", "fixed", "snap" or "none". */ connect?: string | boolean; /** - * When using two handles, the minimum distance between the handles can be set using the margin option. - * The margin value is relative to the value set in 'range'. + * When using two handles, the minimum distance between the handles can be set using the margin option. + * The margin value is relative to the value set in 'range'. * This option is only available on standard linear sliders. */ margin?: number; /** - * The limit option is the oposite of the margin option, - * limiting the maximum distance between two handles. + * The limit option is the oposite of the margin option, + * limiting the maximum distance between two handles. * As with the margin option, the limit option can only be used on linear sliders. */ limit?: number; /** - * By default, the slider slides fluently. - * In order to make the handles jump between intervals, you can use this option. + * By default, the slider slides fluently. + * In order to make the handles jump between intervals, you can use this option. * The step option is relative to the values provided to range. */ step?: number; /** * The orientation setting can be used to set the slider to "vertical" or "horizontal". - * Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. + * Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. * You can use any unit you want, including % or px. */ orientation?: string; /** - * By default the sliders are top-to-bottom and left-to-right, - * but you can change this using the direction option, + * By default the sliders are top-to-bottom and left-to-right, + * but you can change this using the direction option, * which decides where the upper side of the slider is. */ direction?: string; @@ -85,31 +81,29 @@ interface noUiSliderOptions { */ behaviour?: string; /** - * To format the slider output, noUiSlider offers a format option. + * To format the slider output, noUiSlider offers a format option. * Simply specify to and from functions to encode and decode the values. * See manual formatting to the right for usage information. * By default, noUiSlider will format output with 2 decimals. - * Manual formatting can be very tedious, so noUiSlider has support for the wNumb formatting library. - * wNumb offers a wide range of options and provides number validation. */ format?: Object | ((...args:any[]) => any); - + } interface noUiSliderPipsOptions { /** * The range mode uses the slider range to determine where the pips should be. A pip is generated for every percentage specified. - * - * Like range, the steps mode uses the slider range. In steps mode, a pip is generated for every step. + * + * Like range, the steps mode uses the slider range. In steps mode, a pip is generated for every step. * The filter option can be used to filter the generated pips. * The filter function must return 0 (no value), 1 (large value) or 2 (small value). - * + * * In positions mode, pips are generated at percentage-based positions on the slider. Optionally, the stepped option can be set to true to match the pips to the slider steps. - * + * * The count mode can be used to generate a fixed number of pips. As with positions mode, the stepped option can be used. - * + * * The values mode is similar to positions, but it accepts values instead of percentages. The stepped option can be used for this mode. - * + * */ mode: string; /** @@ -130,7 +124,7 @@ interface noUiSliderPipsOptions { */ format?: Object; /** - * + * * values for positions and values mode * number pips for count mode */ @@ -139,12 +133,11 @@ interface noUiSliderPipsOptions { * stepped option for positions, values and count mode */ stepped?: boolean; - - +} + +interface noUiSliderInstance extends HTMLElement { + noUiSlider: noUiSliderStatic; } -interface JQuery { - noUiSlider(options?: noUiSliderOptions): noUiSliderInstance; - noUiSlider_pips(options?: noUiSliderPipsOptions): noUiSliderInstance; -} \ No newline at end of file +declare var noUiSlider: noUiSliderStatic; \ No newline at end of file From 899eeb3df176598d7e0585a854a31100cbf44d9a Mon Sep 17 00:00:00 2001 From: Patrick Davies Date: Fri, 14 Aug 2015 09:51:09 -0400 Subject: [PATCH 2/5] Update version and contributor --- nouislider/nouislider.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/nouislider/nouislider.d.ts b/nouislider/nouislider.d.ts index 4ac4b55ee..fac735ebd 100644 --- a/nouislider/nouislider.d.ts +++ b/nouislider/nouislider.d.ts @@ -1,6 +1,6 @@ -// Type definitions for nouislider v7.0.10 +// Type definitions for nouislider v8.0.2 // Project: https://github.com/leongersen/noUiSlider -// Definitions by: Corey Jepperson +// Definitions by: Patrick Davies // Definitions: https://github.com/borisyankov/DefinitelyTyped /// From 72cb54fc60293fbce35a6c4de9f240f7e64afc5d Mon Sep 17 00:00:00 2001 From: Patrick Davies Date: Fri, 14 Aug 2015 11:32:12 -0400 Subject: [PATCH 3/5] added return type of the create function --- nouislider/nouislider.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nouislider/nouislider.d.ts b/nouislider/nouislider.d.ts index fac735ebd..cf5e93b42 100644 --- a/nouislider/nouislider.d.ts +++ b/nouislider/nouislider.d.ts @@ -8,7 +8,7 @@ interface noUiSliderStatic { /** * To create a slider, call noUiSlider.create() with an element and your options. */ - create(target: HTMLElement, options: noUiSliderOptions); + create(target: HTMLElement, options: noUiSliderOptions): void; /** * To get the current slider value. For one-handle sliders, calling .get() will return the value. * For two-handle sliders, an array[value, value] will be returned. From c37d86f09fe62ecfcb18d21340033d28ce7b0dab Mon Sep 17 00:00:00 2001 From: Patrick Davies Date: Fri, 14 Aug 2015 14:24:57 -0400 Subject: [PATCH 4/5] added events methods and destroy method --- nouislider/nouislider-tests.ts | 9 ++++++ nouislider/nouislider.d.ts | 55 ++++++++++++++++++++++++---------- 2 files changed, 49 insertions(+), 15 deletions(-) diff --git a/nouislider/nouislider-tests.ts b/nouislider/nouislider-tests.ts index d20a04793..5c3fad057 100644 --- a/nouislider/nouislider-tests.ts +++ b/nouislider/nouislider-tests.ts @@ -80,3 +80,12 @@ noUiSlider.create(testHtmlElement, { // Set both slider handles (testHtmlElement).noUiSlider.set([13.2, 15.7]); + +// Events +var callback: noUiSliderCallback = (values, handle, unencoded) => {}; +(testHtmlElement).noUiSlider.on('event', callback); + +(testHtmlElement).noUiSlider.off('event'); + +(testHtmlElement).noUiSlider.destroy(); + diff --git a/nouislider/nouislider.d.ts b/nouislider/nouislider.d.ts index cf5e93b42..111b670fa 100644 --- a/nouislider/nouislider.d.ts +++ b/nouislider/nouislider.d.ts @@ -4,24 +4,12 @@ // Definitions: https://github.com/borisyankov/DefinitelyTyped /// + interface noUiSliderStatic { /** * To create a slider, call noUiSlider.create() with an element and your options. */ create(target: HTMLElement, options: noUiSliderOptions): void; - /** - * To get the current slider value. For one-handle sliders, calling .get() will return the value. - * For two-handle sliders, an array[value, value] will be returned. - */ - get(): number | number[]; - /** - * noUiSlider will keep your values within the slider range, which saves you a bunch of validation. - * If you have configured the slider to use one handle, you can change the current value by passing - * a number to the .set() method. If you have two handles, pass an array. One-handled sliders - * will also accept arrays. Within an array, you can set one position to null - * if you want to leave a handle unchanged. - */ - set(value: number | number[]): void; } interface noUiSliderOptions { @@ -135,9 +123,46 @@ interface noUiSliderPipsOptions { stepped?: boolean; } -interface noUiSliderInstance extends HTMLElement { - noUiSlider: noUiSliderStatic; +interface noUiSliderCallback { + /** + * Array for both one-handle and two-handle sliders. It contains the current slider values, + * with formatting applied. + */ + (values: any[], handle: number, unencoded: number): void } +interface noUiSlider { + /** + * Bind event to the slider. + */ + on(eventName: string, callback: noUiSliderCallback): void; + /** + * Unbind event to the slider. + */ + off(eventName: string): void; + /** + * Destroy's the slider. + */ + destroy(): void; + + /** + * To get the current slider value. For one-handle sliders, calling .get() will return the value. + * For two-handle sliders, an array[value, value] will be returned. + */ + get(): number | number[]; + /** + * noUiSlider will keep your values within the slider range, which saves you a bunch of validation. + * If you have configured the slider to use one handle, you can change the current value by passing + * a number to the .set() method. If you have two handles, pass an array. One-handled sliders + * will also accept arrays. Within an array, you can set one position to null + * if you want to leave a handle unchanged. + */ + set(value: number | number[]): void; +} + +interface noUiSliderInstance extends HTMLElement { + noUiSlider: noUiSlider +} + declare var noUiSlider: noUiSliderStatic; \ No newline at end of file From f5fa4cb243574251544c91b879fd9c188e3582f3 Mon Sep 17 00:00:00 2001 From: Patrick Davies Date: Fri, 14 Aug 2015 14:33:05 -0400 Subject: [PATCH 5/5] put interfaces inside a ghost module see http://definitelytyped.org/guides/best-practices.html --- nouislider/nouislider-tests.ts | 20 +-- nouislider/nouislider.d.ts | 318 +++++++++++++++++---------------- 2 files changed, 170 insertions(+), 168 deletions(-) diff --git a/nouislider/nouislider-tests.ts b/nouislider/nouislider-tests.ts index 5c3fad057..837776dfa 100644 --- a/nouislider/nouislider-tests.ts +++ b/nouislider/nouislider-tests.ts @@ -65,27 +65,27 @@ noUiSlider.create(testHtmlElement, { /** * Functions - * Need to cast the HTMLElement as noUiSliderInstance. + * Need to cast the HTMLElement as noUiSlider.Instance. */ // Get value -(testHtmlElement).noUiSlider.get(); +(testHtmlElement).noUiSlider.get(); // Set one value -(testHtmlElement).noUiSlider.set(10); -(testHtmlElement).noUiSlider.set([150]); +(testHtmlElement).noUiSlider.set(10); +(testHtmlElement).noUiSlider.set([150]); // Set the upper handle, // don't change the lower one. -(testHtmlElement).noUiSlider.set([null, 14]); +(testHtmlElement).noUiSlider.set([null, 14]); // Set both slider handles -(testHtmlElement).noUiSlider.set([13.2, 15.7]); +(testHtmlElement).noUiSlider.set([13.2, 15.7]); // Events -var callback: noUiSliderCallback = (values, handle, unencoded) => {}; -(testHtmlElement).noUiSlider.on('event', callback); +var callback: noUiSlider.Callback = (values, handle, unencoded) => {}; +(testHtmlElement).noUiSlider.on('event', callback); -(testHtmlElement).noUiSlider.off('event'); +(testHtmlElement).noUiSlider.off('event'); -(testHtmlElement).noUiSlider.destroy(); +(testHtmlElement).noUiSlider.destroy(); diff --git a/nouislider/nouislider.d.ts b/nouislider/nouislider.d.ts index 111b670fa..e382059fb 100644 --- a/nouislider/nouislider.d.ts +++ b/nouislider/nouislider.d.ts @@ -4,165 +4,167 @@ // Definitions: https://github.com/borisyankov/DefinitelyTyped /// +declare module noUiSlider { + interface Static { + /** + * To create a slider, call noUiSlider.create() with an element and your options. + */ + create(target: HTMLElement, options: Options): void; + } -interface noUiSliderStatic { - /** - * To create a slider, call noUiSlider.create() with an element and your options. - */ - create(target: HTMLElement, options: noUiSliderOptions): void; + interface Options { + /** + * The start option sets the number of handles and their start positions, relative to range. + */ + start: number | number[] | number[][]; + /** + * The connect setting can be used to control the bar between the handles, + * or the edges of the slider. Use "lower" to connect to the lower side, + * or "upper" to connect to the upper side. Setting true sets the bar between the handles. + */ + range: Object; + /** + * noUiSlider offers several ways to handle user interaction. + * The range can be set to drag, and handles can move to taps. + * All these effects are optional, and can be enable by adding their keyword to the behaviour option. + * This option accepts a "-" separated list of "drag", "tap", "fixed", "snap" or "none". + */ + connect?: string | boolean; + /** + * When using two handles, the minimum distance between the handles can be set using the margin option. + * The margin value is relative to the value set in 'range'. + * This option is only available on standard linear sliders. + */ + margin?: number; + /** + * The limit option is the oposite of the margin option, + * limiting the maximum distance between two handles. + * As with the margin option, the limit option can only be used on linear sliders. + */ + limit?: number; + /** + * By default, the slider slides fluently. + * In order to make the handles jump between intervals, you can use this option. + * The step option is relative to the values provided to range. + */ + step?: number; + /** + * The orientation setting can be used to set the slider to "vertical" or "horizontal". + * Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. + * You can use any unit you want, including % or px. + */ + orientation?: string; + /** + * By default the sliders are top-to-bottom and left-to-right, + * but you can change this using the direction option, + * which decides where the upper side of the slider is. + */ + direction?: string; + /** + * Set the animate option to false to prevent the slider from animating to a new value with when calling .val(). + */ + animate?: boolean; + /** + * All values on the slider are part of a range. The range has a minimum and maximum value. + */ + behaviour?: string; + /** + * To format the slider output, noUiSlider offers a format option. + * Simply specify to and from functions to encode and decode the values. + * See manual formatting to the right for usage information. + * By default, noUiSlider will format output with 2 decimals. + */ + format?: Object | ((...args:any[]) => any); + + } + + interface PipsOptions { + /** + * The range mode uses the slider range to determine where the pips should be. A pip is generated for every percentage specified. + * + * Like range, the steps mode uses the slider range. In steps mode, a pip is generated for every step. + * The filter option can be used to filter the generated pips. + * The filter function must return 0 (no value), 1 (large value) or 2 (small value). + * + * In positions mode, pips are generated at percentage-based positions on the slider. Optionally, the stepped option can be set to true to match the pips to the slider steps. + * + * The count mode can be used to generate a fixed number of pips. As with positions mode, the stepped option can be used. + * + * The values mode is similar to positions, but it accepts values instead of percentages. The stepped option can be used for this mode. + * + */ + mode: string; + /** + * Range Mode: percentage for range mode + * Step Mode: step number for steps + * Positions Mode: percentage-based positions on the slider + * Count Mode: positions between pips + */ + density?: number; + /** + * Step Mode: The filter option can be used to filter the generated pips. + * The filter function must return 0 (no value), 1 (large value) or 2 (small value). + */ + filter?: (...args:any[]) => number; + /** + * format for step mode + * see noUiSlider format + */ + format?: Object; + /** + * + * values for positions and values mode + * number pips for count mode + */ + values?: number | number[]; + /** + * stepped option for positions, values and count mode + */ + stepped?: boolean; + } + + interface Callback { + /** + * Array for both one-handle and two-handle sliders. It contains the current slider values, + * with formatting applied. + */ + (values: any[], handle: number, unencoded: number): void + } + + + interface noUiSlider { + /** + * Bind event to the slider. + */ + on(eventName: string, callback: Callback): void; + /** + * Unbind event to the slider. + */ + off(eventName: string): void; + /** + * Destroy's the slider. + */ + destroy(): void; + + /** + * To get the current slider value. For one-handle sliders, calling .get() will return the value. + * For two-handle sliders, an array[value, value] will be returned. + */ + get(): number | number[]; + /** + * noUiSlider will keep your values within the slider range, which saves you a bunch of validation. + * If you have configured the slider to use one handle, you can change the current value by passing + * a number to the .set() method. If you have two handles, pass an array. One-handled sliders + * will also accept arrays. Within an array, you can set one position to null + * if you want to leave a handle unchanged. + */ + set(value: number | number[]): void; + } + + interface Instance extends HTMLElement { + noUiSlider: noUiSlider + } } -interface noUiSliderOptions { - /** - * The start option sets the number of handles and their start positions, relative to range. - */ - start: number | number[] | number[][]; - /** - * The connect setting can be used to control the bar between the handles, - * or the edges of the slider. Use "lower" to connect to the lower side, - * or "upper" to connect to the upper side. Setting true sets the bar between the handles. - */ - range: Object; - /** - * noUiSlider offers several ways to handle user interaction. - * The range can be set to drag, and handles can move to taps. - * All these effects are optional, and can be enable by adding their keyword to the behaviour option. - * This option accepts a "-" separated list of "drag", "tap", "fixed", "snap" or "none". - */ - connect?: string | boolean; - /** - * When using two handles, the minimum distance between the handles can be set using the margin option. - * The margin value is relative to the value set in 'range'. - * This option is only available on standard linear sliders. - */ - margin?: number; - /** - * The limit option is the oposite of the margin option, - * limiting the maximum distance between two handles. - * As with the margin option, the limit option can only be used on linear sliders. - */ - limit?: number; - /** - * By default, the slider slides fluently. - * In order to make the handles jump between intervals, you can use this option. - * The step option is relative to the values provided to range. - */ - step?: number; - /** - * The orientation setting can be used to set the slider to "vertical" or "horizontal". - * Set dimensions! Vertical sliders don't assume a default height, so you'll need to set one. - * You can use any unit you want, including % or px. - */ - orientation?: string; - /** - * By default the sliders are top-to-bottom and left-to-right, - * but you can change this using the direction option, - * which decides where the upper side of the slider is. - */ - direction?: string; - /** - * Set the animate option to false to prevent the slider from animating to a new value with when calling .val(). - */ - animate?: boolean; - /** - * All values on the slider are part of a range. The range has a minimum and maximum value. - */ - behaviour?: string; - /** - * To format the slider output, noUiSlider offers a format option. - * Simply specify to and from functions to encode and decode the values. - * See manual formatting to the right for usage information. - * By default, noUiSlider will format output with 2 decimals. - */ - format?: Object | ((...args:any[]) => any); +declare var noUiSlider: noUiSlider.Static; -} - -interface noUiSliderPipsOptions { - /** - * The range mode uses the slider range to determine where the pips should be. A pip is generated for every percentage specified. - * - * Like range, the steps mode uses the slider range. In steps mode, a pip is generated for every step. - * The filter option can be used to filter the generated pips. - * The filter function must return 0 (no value), 1 (large value) or 2 (small value). - * - * In positions mode, pips are generated at percentage-based positions on the slider. Optionally, the stepped option can be set to true to match the pips to the slider steps. - * - * The count mode can be used to generate a fixed number of pips. As with positions mode, the stepped option can be used. - * - * The values mode is similar to positions, but it accepts values instead of percentages. The stepped option can be used for this mode. - * - */ - mode: string; - /** - * Range Mode: percentage for range mode - * Step Mode: step number for steps - * Positions Mode: percentage-based positions on the slider - * Count Mode: positions between pips - */ - density?: number; - /** - * Step Mode: The filter option can be used to filter the generated pips. - * The filter function must return 0 (no value), 1 (large value) or 2 (small value). - */ - filter?: (...args:any[]) => number; - /** - * format for step mode - * see noUiSlider format - */ - format?: Object; - /** - * - * values for positions and values mode - * number pips for count mode - */ - values?: number | number[]; - /** - * stepped option for positions, values and count mode - */ - stepped?: boolean; -} - -interface noUiSliderCallback { - /** - * Array for both one-handle and two-handle sliders. It contains the current slider values, - * with formatting applied. - */ - (values: any[], handle: number, unencoded: number): void -} - - -interface noUiSlider { - /** - * Bind event to the slider. - */ - on(eventName: string, callback: noUiSliderCallback): void; - /** - * Unbind event to the slider. - */ - off(eventName: string): void; - /** - * Destroy's the slider. - */ - destroy(): void; - - /** - * To get the current slider value. For one-handle sliders, calling .get() will return the value. - * For two-handle sliders, an array[value, value] will be returned. - */ - get(): number | number[]; - /** - * noUiSlider will keep your values within the slider range, which saves you a bunch of validation. - * If you have configured the slider to use one handle, you can change the current value by passing - * a number to the .set() method. If you have two handles, pass an array. One-handled sliders - * will also accept arrays. Within an array, you can set one position to null - * if you want to leave a handle unchanged. - */ - set(value: number | number[]): void; -} - -interface noUiSliderInstance extends HTMLElement { - noUiSlider: noUiSlider -} - -declare var noUiSlider: noUiSliderStatic; \ No newline at end of file