Skip to content

Commit bccf966

Browse files
leongersenleongersen
committed
Add disable/enable methods to disable slider or handles
1 parent e1df7e8 commit bccf966

File tree

13 files changed

+129
-22
lines changed

13 files changed

+129
-22
lines changed

‎CHANGELOG.MD‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Changelog
22

3+
### 15.7.0 (*2023-02-06*)
4+
- Added: `disable` and `enable` methods to disable slider or handles (#1158, #1227);
5+
36
### 15.6.1 (*2022-08-12*)
47
- Fixed: (Typescript) type for keys in `range` (#1218);
58

‎dist/nouislider.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@ export interface API {
134134
set: (input: number | string | (number | string)[], fireSetEvent?: boolean, exactInput?: boolean) => void;
135135
setHandle: (handleNumber: number, value: number | string, fireSetEvent?: boolean, exactInput?: boolean) => void;
136136
reset: (fireSetEvent?: boolean) => void;
137+
disable: (handleNumber?: number) => void;
138+
enable: (handleNumber?: number) => void;
137139
options: Options;
138140
updateOptions: (optionsToUpdate: UpdatableOptions, fireSetEvent: boolean) => void;
139141
target: HTMLElement;

‎dist/nouislider.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -959,6 +959,7 @@
959959
else if (handleNumber === options.handles - 1) {
960960
addClass(handle, options.cssClasses.handleUpper);
961961
}
962+
origin.handle = handle;
962963
return origin;
963964
}
964965
// Insert nodes for connect elements
@@ -1022,6 +1023,31 @@
10221023
var handleOrigin = scope_Handles[handleNumber];
10231024
return handleOrigin.hasAttribute("disabled");
10241025
}
1026+
function disable(handleNumber) {
1027+
if (handleNumber !== null && handleNumber !== undefined) {
1028+
scope_Handles[handleNumber].setAttribute("disabled", "");
1029+
scope_Handles[handleNumber].handle.removeAttribute("tabindex");
1030+
}
1031+
else {
1032+
scope_Target.setAttribute("disabled", "");
1033+
scope_Handles.forEach(function (handle) {
1034+
handle.handle.removeAttribute("tabindex");
1035+
});
1036+
}
1037+
}
1038+
function enable(handleNumber) {
1039+
if (handleNumber !== null && handleNumber !== undefined) {
1040+
scope_Handles[handleNumber].removeAttribute("disabled");
1041+
scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
1042+
}
1043+
else {
1044+
scope_Target.removeAttribute("disabled");
1045+
scope_Handles.forEach(function (handle) {
1046+
handle.removeAttribute("disabled");
1047+
handle.handle.setAttribute("tabindex", "0");
1048+
});
1049+
}
1050+
}
10251051
function removeTooltips() {
10261052
if (scope_Tooltips) {
10271053
removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
@@ -2199,6 +2225,8 @@
21992225
set: valueSet,
22002226
setHandle: valueSetHandle,
22012227
reset: valueReset,
2228+
disable: disable,
2229+
enable: enable,
22022230
// Exposed for unit testing, don't use this in your application.
22032231
__moveHandles: function (upward, proposal, handleNumbers) {
22042232
moveHandles(upward, proposal, scope_Locations, handleNumbers);

‎dist/nouislider.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/nouislider.min.mjs‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎dist/nouislider.mjs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -954,6 +954,7 @@ function scope(target, options, originalOptions) {
954954
else if (handleNumber === options.handles - 1) {
955955
addClass(handle, options.cssClasses.handleUpper);
956956
}
957+
origin.handle = handle;
957958
return origin;
958959
}
959960
// Insert nodes for connect elements
@@ -1017,6 +1018,31 @@ function scope(target, options, originalOptions) {
10171018
var handleOrigin = scope_Handles[handleNumber];
10181019
return handleOrigin.hasAttribute("disabled");
10191020
}
1021+
function disable(handleNumber) {
1022+
if (handleNumber !== null && handleNumber !== undefined) {
1023+
scope_Handles[handleNumber].setAttribute("disabled", "");
1024+
scope_Handles[handleNumber].handle.removeAttribute("tabindex");
1025+
}
1026+
else {
1027+
scope_Target.setAttribute("disabled", "");
1028+
scope_Handles.forEach(function (handle) {
1029+
handle.handle.removeAttribute("tabindex");
1030+
});
1031+
}
1032+
}
1033+
function enable(handleNumber) {
1034+
if (handleNumber !== null && handleNumber !== undefined) {
1035+
scope_Handles[handleNumber].removeAttribute("disabled");
1036+
scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
1037+
}
1038+
else {
1039+
scope_Target.removeAttribute("disabled");
1040+
scope_Handles.forEach(function (handle) {
1041+
handle.removeAttribute("disabled");
1042+
handle.handle.setAttribute("tabindex", "0");
1043+
});
1044+
}
1045+
}
10201046
function removeTooltips() {
10211047
if (scope_Tooltips) {
10221048
removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
@@ -2194,6 +2220,8 @@ function scope(target, options, originalOptions) {
21942220
set: valueSet,
21952221
setHandle: valueSetHandle,
21962222
reset: valueReset,
2223+
disable: disable,
2224+
enable: enable,
21972225
// Exposed for unit testing, don't use this in your application.
21982226
__moveHandles: function (upward, proposal, handleNumbers) {
21992227
moveHandles(upward, proposal, scope_Locations, handleNumbers);

‎documentation/more.php‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,17 @@
2020

2121
<div class="view">
2222

23-
<p>Disabling a slider is identical to disabling a checkbox or textarea; add the <code class="language-markup">disabled</code> attribute.</p>
23+
<p>A slider can be disabled by calling the <code>disable</code> method in the API.</p>
2424

2525
<p>A disabled slider can't be changed by user interaction (sliding, clicking or touching), but its value can still be changed using the <code>.set()</code> method.</p>
2626

2727
<p>CSS can be used to show the disabled state. The default stylesheet also sets a <code>not-allowed</code> cursor.</p>
2828

2929
<p>The slider below is disabled when the checkbox is checked, and re-enabled when it is unchecked.</p>
3030

31-
<p>Individual handles can be disabled by adding a <code>disabled</code> attribute to a <code>.noUi-origin</code> element.</p>
31+
<p>Individual handles can be disabled by calling the <code>disable</code> with a zero-index handle number. Disabling an individual handle will also prevent it from having <code>focus</code>.</p>
32+
33+
<p>The slider or handles can re re-enabled using the <code>enable</code> method.</p>
3234

3335
<div class="example">
3436
<div id="disable1"></div>

‎documentation/more/disable-all.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
// To disable
2-
slider.setAttribute('disabled', true);
2+
slider.noUiSlider.disable();
33

44
// To re-enable
5-
slider.removeAttribute('disabled');
5+
slider.noUiSlider.enable();
66

77
// To disable one handle
8-
var origins = slider.querySelectorAll('.noUi-origin');
9-
origins[0].setAttribute('disabled', true);
8+
slider.noUiSlider.disable(1);

‎documentation/more/disable.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,16 @@ var slider1 = document.getElementById('disable1'),
22
slider2 = document.getElementById('disable2'),
33
checkbox1 = document.getElementById('checkbox1'),
44
checkbox2 = document.getElementById('checkbox2'),
5-
checkbox3 = document.getElementById('checkbox3'),
6-
origins = slider2.querySelectorAll('.noUi-origin');
5+
checkbox3 = document.getElementById('checkbox3');
76

8-
function toggle(element) {
7+
function toggle(checkbox, slider, handleNumber) {
98

109
// If the checkbox is checked, disabled the slider.
1110
// Otherwise, re-enable it.
12-
if (this.checked) {
13-
element.setAttribute('disabled', true);
11+
if (checkbox.checked) {
12+
slider.noUiSlider.disable(handleNumber);
1413
} else {
15-
element.removeAttribute('disabled');
14+
slider.noUiSlider.enable(handleNumber);
1615
}
1716
}
1817

@@ -34,13 +33,13 @@ noUiSlider.create(slider2, {
3433
});
3534

3635
checkbox1.addEventListener('click', function () {
37-
toggle.call(this, slider1);
36+
toggle(this, slider1);
3837
});
3938

4039
checkbox2.addEventListener('click', function () {
41-
toggle.call(this, origins[0]);
40+
toggle(this, slider2, 0);
4241
});
4342

4443
checkbox3.addEventListener('click', function () {
45-
toggle.call(this, origins[1]);
44+
toggle(this, slider2, 1);
4645
});

‎documentation/reference.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,16 @@
231231
<td><code>slider.noUiSlider.reset()</code></td>
232232
<td><em>[none]</em></td>
233233
</tr>
234+
<tr>
235+
<td><a href="/nouislider/more/#section-disable">disable</a></td>
236+
<td><code>slider.noUiSlider.disable()</code></td>
237+
<td><em>[none]</em>, <code>"number"</code></td>
238+
</tr>
239+
<tr>
240+
<td><a href="/nouislider/more/#section-disable">enable</a></td>
241+
<td><code>slider.noUiSlider.enable()</code></td>
242+
<td><em>[none]</em>, <code>"number"</code></td>
243+
</tr>
234244
<tr>
235245
<td><a href="/nouislider/more/#section-update">updateOptions</a></td>
236246
<td><code>slider.noUiSlider.updateOptions(...)</code></td>

0 commit comments

Comments
 (0)