diff --git a/jqrangeslider/jqrangeslider-tests.ts b/jqrangeslider/jqrangeslider-tests.ts index 152ab28e75c643..41cce4db95b90f 100644 --- a/jqrangeslider/jqrangeslider-tests.ts +++ b/jqrangeslider/jqrangeslider-tests.ts @@ -52,6 +52,16 @@ $("#defaultValuesExample").dateRangeSlider({ durationIn: 1000, durationOut: 1000 }); +// Enabled +$("#disabledExample").rangeSlider({ + enabled: false +}); +$("#disabledExample").editRangeSlider({ + enabled: false +}); +$("#disabledExample").dateRangeSlider({ + enabled: false +}); // Formatter - JS-way $("#formatterExample").rangeSlider({ formatter: function (val) { @@ -115,6 +125,51 @@ $("#rangeExample").rangeSlider({range: {min: 10, max: false}}); $("#rangeExample").rangeSlider({range: false}); $("#rangeExample").rangeSlider({range: {min: false, max: false}}); $("#rangeExample").rangeSlider({range: {min: false}}); +// Scales +$("#rulersExample").rangeSlider({ + scales: [ + // Primary scale + { + first: function(val){ return val; }, + next: function(val){ return val + 10; }, + stop: function(val){ return false; }, + label: function(val){ return val; }, + format: function(tickContainer, tickStart, tickEnd){ + tickContainer.addClass("myCustomClass"); + } + }, + // Secondary scale + { + first: function(val){ return val; }, + next: function(val){ + if (val % 10 === 9){ + return val + 2; + } + return val + 1; + }, + stop: function(val){ return false; }, + label: function(){ return null; } + }] +}); +var monthsForScales = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]; +$("#dateRulersExample").dateRangeSlider({ + bounds: {min: new Date(2012, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59)}, + defaultValues: {min: new Date(2012, 1, 10), max: new Date(2012, 4, 22)}, + scales: [{ + first: function(value){ return value; }, + stop: function(value) {return false; }, // changed from original example which had 'end' because that's a typo + next: function(value){ + var next = new Date(value); + return new Date(next.setMonth(value.getMonth() + 1)); + }, + label: function(value){ + return monthsForScales[value.getMonth()]; + }, + format: function(tickContainer, tickStart, tickEnd){ + tickContainer.addClass("myCustomClass"); + } + }] +}); // Step $("#stepExample").rangeSlider({step: 10}); $("#rangeExample").dateRangeSlider({ @@ -122,6 +177,13 @@ $("#rangeExample").dateRangeSlider({ days: 2 } }); +// Symmetric Positionning +$("#symmetricExample").rangeSlider({ + symmetricPositionning: true, + range: {min: 0} +}); +// Type +$("#typeExample").editRangeSlider({type: "number"}); // Value labels $("#valueLabelsExample").rangeSlider({valueLabels: "change"}); $("#valueLabelsExample").dateRangeSlider({valueLabels: "change"}); diff --git a/jqrangeslider/jqrangeslider.d.ts b/jqrangeslider/jqrangeslider.d.ts index 2e93ae6f56ce21..7ffb8f02393be3 100644 --- a/jqrangeslider/jqrangeslider.d.ts +++ b/jqrangeslider/jqrangeslider.d.ts @@ -1,4 +1,4 @@ -// Type definitions for jQRangeSlider 4.2.8 +// Type definitions for jQRangeSlider 5.7.2 // Project: http://ghusse.github.com/jQRangeSlider // Definitions by: Dániel Tar // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped @@ -31,6 +31,15 @@ interface JQRangeSliderDateSteps { seconds?: number; } +interface jQRangeSliderScale { + first?: (min:number, max:number) => number; // compute the ruler first value. + next: (value:any) => any; // compute the next value. + label?: (value:any, nextValue:any) => string; // compute displayed text for a given internal + stop?: (value:any) => boolean; // 'true' to stop scale generating ticks from a given value + format?: (tickContainer:any, tickStartValue:any, tickEndValue:any) => void; // customise the tick container DOM element (passed as jQuery object) + // doco example mentions 'end' function in example but it's not supported: https://github.com/ghusse/jQRangeSlider/blob/master/jQRuler.js#L12 +} + interface JQRangeSliderOptions { wheelMode?: string; // function of the wheel, "zoom", "scroll" or null wheelSpeed?: number; // speed of the wheel scrolling @@ -40,6 +49,9 @@ interface JQRangeSliderOptions { durationOut?: number; // fade out length when displaying value labels (only when valueLabels = "change") delayOut?: number; // duration labels are shown after the user changed its values (only when valueLabels = "change") range?: JQRangeSliderRangeLength; // lets you specify minimum and/or maximum range length + symmetricPositionning?: boolean; // show handles and make them clearly select the range. Warning: must be used with 'minimum' and must not be used with 'scale' + enabled?: boolean; // configure a read-only slider + scales?: jQRangeSliderScale[]; // TODO support scales } interface JQNumericRangeSliderOptions extends JQRangeSliderOptions { @@ -49,6 +61,10 @@ interface JQNumericRangeSliderOptions extends JQRangeSliderOptions { step?: number; // allows to customize values rounding, and graphically render this rounding } +interface JQEditRangeSliderOptions extends JQNumericRangeSliderOptions { + type?: string; // specify input types in edit slider. Possible values are text (default) and number +} + interface JQDateRangeSliderOptions extends JQRangeSliderOptions { bounds?: JQRangeSliderDateRange; // min and max values of the slider defaultValues?: JQRangeSliderDateRange; // values selected by default on construction @@ -65,7 +81,7 @@ interface JQuery { editRangeSlider(method: string): any; editRangeSlider(method: string, value: number): JQuery; editRangeSlider(method: string, min: number, max: number): JQuery - editRangeSlider(options?: JQNumericRangeSliderOptions): JQuery; + editRangeSlider(options?: JQEditRangeSliderOptions): JQuery; dateRangeSlider(method: string): any; dateRangeSlider(method: string, value: Date): JQuery;