casraf/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/chenasraf/DefinitelyTyped.git synced 2026-05-18 01:49:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

🤖 Merge PR #50134 Update bootstrap-slider to 11.0 and support using as a module by @euclio

Browse Source 
* bootstrap-slider: add non-JQuery support

* bootstrap-slider: update to 11.0
This commit is contained in:
Andy Russell
2020-12-15 23:41:28 -05:00
committed by GitHub
parent 69969119a8
commit 3384a2abda
2 changed files with 129 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
types/bootstrap-slider/bootstrap-slider-tests.ts
View File

@@ -1,4 +1,5 @@
import $ = require('jquery');
import Slider = require('bootstrap-slider');
$(() => {
// examples from http://seiyria.github.io/bootstrap-slider/
@@ -8,8 +9,14 @@ $(() => {
return 'Current value: ' + value;
}
});
new Slider('#ex1', {
formatter(value) {
return 'Current value: ' + value;
}
});
$('#ex2').slider({});
new Slider('#ex2', {});
const RGBChange = () => {
$('#RGB').css('background', `rgb(${r.getValue()},${g.getValue()},${b.getValue()})`);
@@ -28,50 +35,82 @@ $(() => {
$('#ex4').slider({
reversed: true
});
new Slider("#ex4", {
reversed : true
});
$('#ex5').slider();
let slider = new Slider('#ex5');
$('#destroyEx5Slider').click(() => {
$('#ex5').slider('destroy');
slider.destroy();
});
$('#ex6').slider();
$('#ex6').on('slide', (slideEvt) => {
$('#ex6SliderVal').text(<number> slideEvt.value);
});
slider = new Slider("#ex6");
slider.on("slide", (sliderValue) => {
document.getElementById("ex6SliderVal")!.textContent = sliderValue!.toString();
});
$('#ex7').slider();
slider = new Slider("#ex7");
$<HTMLInputElement>('#ex7-enabled').click(function() {
if (this.checked) {
// With JQuery
$('#ex7').slider('enable');
slider.enable();
} else {
// With JQuery
$('#ex7').slider('disable');
slider.disable();
}
});
$('#ex8').slider({
tooltip: 'always'
});
slider = new Slider("#ex8", {
tooltip: 'always'
});
$('#ex9').slider({
precision: 2,
value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});
slider = new Slider("#ex9", {
precision: 2,
value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});
$('#ex11').slider({ step: 20000, min: 0, max: 200000 });
slider = new Slider("#ex11", {
step: 20000,
min: 0,
max: 200000
});
$('#ex12a').slider({ id: 'slider12a', min: 0, max: 10, value: 5 });
$('#ex12b').slider({ id: 'slider12b', min: 0, max: 10, range: true, value: [3, 7] });
$('#ex12c').slider({ id: 'slider12c', min: 0, max: 10, range: true, value: [3, 7] });
let sliderA = new Slider("#ex12a", { id: "slider12a", min: 0, max: 10, value: 5 });
let sliderB = new Slider("#ex12b", { id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
const sliderC = new Slider("#ex12c", { id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
$('#ex13').slider({
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
slider = new Slider("#ex13", {
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
$('#ex14').slider({
ticks: [0, 100, 200, 300, 400],
@@ -79,6 +118,12 @@ $(() => {
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
slider = new Slider("#ex14", {
ticks: [0, 100, 200, 300, 400],
ticks_positions: [0, 30, 70, 90, 100],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
$('#ex15').slider({
min: 1000,
@@ -86,9 +131,17 @@ $(() => {
scale: 'logarithmic',
step: 10
});
slider = new Slider('#ex15', {
min: 1000,
max: 10000000,
scale: 'logarithmic',
step: 10
});
$('#ex16a').slider({ min: 0, max: 10, value: 0, focus: true });
$('#ex16b').slider({ min: 0, max: 10, value: [0, 10], focus: true });
sliderA = new Slider("#ex16a", { min: 0, max: 10, value: 0, focus: true });
sliderB = new Slider("#ex16b", { min: 0, max: 10, value: [0, 10], focus: true });
$("#ex17a").slider({
min: 0,
@@ -103,6 +156,19 @@ $(() => {
orientation: 'vertical',
tooltip_position: 'left'
});
sliderA = new Slider("#ex17a", {
min: 0,
max: 10,
value: 0,
tooltip_position: 'bottom'
});
sliderB = new Slider("#ex17b", {
min: 0,
max: 10,
value: 0,
orientation: 'vertical',
tooltip_position: 'left'
});
$("#ex18a").slider({
min: 0,
@@ -116,6 +182,18 @@ $(() => {
value: [3, 6],
labelledby: ['ex18-label-2a', 'ex18-label-2b']
});
new Slider("#ex18a", {
min: 0,
max: 10,
value: 5,
labelledby: 'ex18-label-1'
});
new Slider("#ex18b", {
min: 0,
max: 10,
value: [3, 6],
labelledby: ['ex18-label-2a', 'ex18-label-2b']
});
$('#ex22').slider({
id: 'slider22',
@@ -128,6 +206,17 @@ $(() => {
{ start: 17, end: 19 },
{ start: 17, end: 24 },
{ start: -3, end: 19 }]});
slider = new Slider("#ex22", {
id: 'slider22',
min: 0,
max: 20,
step: 1,
value: 14,
rangeHighlights: [{ start: 2, end: 5, class: "category1" },
{ start: 7, end: 8, class: "category2" },
{ start: 17, end: 19 },
{ start: 17, end: 24 },
{ start: -3, end: 19 }]});
$("#ex23").slider({
ticks: [0, 1, 2, 3, 4],
@@ -139,6 +228,26 @@ $(() => {
ticks_tooltip: true,
step: 0.01
});
new Slider("#ex23", {
ticks: [0, 1, 2, 3, 4],
ticks_positions: [0, 30, 70, 90, 100],
ticks_snap_bounds: 200,
formatter(value) {
return 'Current value: ' + value;
},
ticks_tooltip: true,
step: 0.01
});
$("#ex25").slider({
value: [1, 100],
ticks: [1, 50, 100],
lock_to_ticks: true
});
$('#ex26').slider('refresh', { useCurrentValue: true });
slider = new Slider('#ex26');
slider.refresh({ useCurrentValue: true });
// examples from https://github.com/seiyria/bootstrap-slider/blob/master/README.md

27
types/bootstrap-slider/index.d.ts vendored
View File

@@ -1,4 +1,4 @@
// Type definitions for bootstrap-slider.js 9.9
// Type definitions for bootstrap-slider.js 11.0
// Project: http://github.com/seiyria/bootstrap-slider
// Definitions by: Daniel Beckwith <https://github.com/dbeckwith>
// Leonard Thieu <https://github.com/leonard-thieu>
@@ -164,13 +164,20 @@ interface SliderOptions {
* [{'start':val1, 'end': val2, 'class': 'optionalAdditionalClassName'}].
*/
rangeHighlights?: RangeHighlight[];
/**
* Default: false
* Lock the selection to the values defined in the ticks array.
*/
lock_to_ticks?: boolean;
}
interface JQuery {
slider: SliderPlugin<this>;
bootstrapSlider: SliderPlugin<this>;
declare global {
interface JQuery {
slider: SliderPlugin<this>;
bootstrapSlider: SliderPlugin<this>;
on(event: 'slide', handler: (slideEvt: SliderEvent) => false | void): this;
on(event: 'slide', handler: (slideEvt: SliderEvent) => false | void): this;
}
}
interface SliderPlugin<TJQuery> {
@@ -190,13 +197,17 @@ interface SliderEvent extends JQuery.Event {
value: number | ChangeValue;
}
interface RefreshOptions {
useCurrentValue?: boolean;
}
/**
* This class is actually not used when using the jQuery version of bootstrap-slider
* The method documentation is still here thouh.
* When using jQuery, slider methods like setValue(3, true) have to be called like $slider.slider('setValue', 3, true)
*/
declare class Slider {
constructor(selector: string, opts: SliderOptions);
constructor(element: string | HTMLElement, opts?: SliderOptions);
/**
* Get the current value from the slider
@@ -242,7 +253,7 @@ declare class Slider {
/**
* Refreshes the current slider
*/
refresh(): this;
refresh(options?: RefreshOptions): this;
/**
* When the slider event eventType is triggered, the callback function will be invoked
*/
@@ -256,3 +267,5 @@ declare class Slider {
*/
relayout(): this;
}
export = Slider;