Skip to content

Commit

Permalink
Add disable/enable methods to disable slider or handles
Browse files Browse the repository at this point in the history
  • Loading branch information
leongersen committed Feb 6, 2023
1 parent e1df7e8 commit bccf966
Show file tree
Hide file tree
Showing 13 changed files with 129 additions and 22 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.MD
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Changelog

### 15.7.0 (*2023-02-06*)
- Added: `disable` and `enable` methods to disable slider or handles (#1158, #1227);

### 15.6.1 (*2022-08-12*)
- Fixed: (Typescript) type for keys in `range` (#1218);

Expand Down
2 changes: 2 additions & 0 deletions dist/nouislider.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ export interface API {
set: (input: number | string | (number | string)[], fireSetEvent?: boolean, exactInput?: boolean) => void;
setHandle: (handleNumber: number, value: number | string, fireSetEvent?: boolean, exactInput?: boolean) => void;
reset: (fireSetEvent?: boolean) => void;
disable: (handleNumber?: number) => void;
enable: (handleNumber?: number) => void;
options: Options;
updateOptions: (optionsToUpdate: UpdatableOptions, fireSetEvent: boolean) => void;
target: HTMLElement;
Expand Down
28 changes: 28 additions & 0 deletions dist/nouislider.js
Original file line number Diff line number Diff line change
Expand Up @@ -959,6 +959,7 @@
else if (handleNumber === options.handles - 1) {
addClass(handle, options.cssClasses.handleUpper);
}
origin.handle = handle;
return origin;
}
// Insert nodes for connect elements
Expand Down Expand Up @@ -1022,6 +1023,31 @@
var handleOrigin = scope_Handles[handleNumber];
return handleOrigin.hasAttribute("disabled");
}
function disable(handleNumber) {
if (handleNumber !== null && handleNumber !== undefined) {
scope_Handles[handleNumber].setAttribute("disabled", "");
scope_Handles[handleNumber].handle.removeAttribute("tabindex");
}
else {
scope_Target.setAttribute("disabled", "");
scope_Handles.forEach(function (handle) {
handle.handle.removeAttribute("tabindex");
});
}
}
function enable(handleNumber) {
if (handleNumber !== null && handleNumber !== undefined) {
scope_Handles[handleNumber].removeAttribute("disabled");
scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
}
else {
scope_Target.removeAttribute("disabled");
scope_Handles.forEach(function (handle) {
handle.removeAttribute("disabled");
handle.handle.setAttribute("tabindex", "0");
});
}
}
function removeTooltips() {
if (scope_Tooltips) {
removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
Expand Down Expand Up @@ -2199,6 +2225,8 @@
set: valueSet,
setHandle: valueSetHandle,
reset: valueReset,
disable: disable,
enable: enable,
// Exposed for unit testing, don't use this in your application.
__moveHandles: function (upward, proposal, handleNumbers) {
moveHandles(upward, proposal, scope_Locations, handleNumbers);
Expand Down
2 changes: 1 addition & 1 deletion dist/nouislider.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/nouislider.min.mjs

Large diffs are not rendered by default.

28 changes: 28 additions & 0 deletions dist/nouislider.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -954,6 +954,7 @@ function scope(target, options, originalOptions) {
else if (handleNumber === options.handles - 1) {
addClass(handle, options.cssClasses.handleUpper);
}
origin.handle = handle;
return origin;
}
// Insert nodes for connect elements
Expand Down Expand Up @@ -1017,6 +1018,31 @@ function scope(target, options, originalOptions) {
var handleOrigin = scope_Handles[handleNumber];
return handleOrigin.hasAttribute("disabled");
}
function disable(handleNumber) {
if (handleNumber !== null && handleNumber !== undefined) {
scope_Handles[handleNumber].setAttribute("disabled", "");
scope_Handles[handleNumber].handle.removeAttribute("tabindex");
}
else {
scope_Target.setAttribute("disabled", "");
scope_Handles.forEach(function (handle) {
handle.handle.removeAttribute("tabindex");
});
}
}
function enable(handleNumber) {
if (handleNumber !== null && handleNumber !== undefined) {
scope_Handles[handleNumber].removeAttribute("disabled");
scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
}
else {
scope_Target.removeAttribute("disabled");
scope_Handles.forEach(function (handle) {
handle.removeAttribute("disabled");
handle.handle.setAttribute("tabindex", "0");
});
}
}
function removeTooltips() {
if (scope_Tooltips) {
removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
Expand Down Expand Up @@ -2194,6 +2220,8 @@ function scope(target, options, originalOptions) {
set: valueSet,
setHandle: valueSetHandle,
reset: valueReset,
disable: disable,
enable: enable,
// Exposed for unit testing, don't use this in your application.
__moveHandles: function (upward, proposal, handleNumbers) {
moveHandles(upward, proposal, scope_Locations, handleNumbers);
Expand Down
6 changes: 4 additions & 2 deletions documentation/more.php
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,17 @@

<div class="view">

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

<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>

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

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

<p>Individual handles can be disabled by adding a <code>disabled</code> attribute to a <code>.noUi-origin</code> element.</p>
<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>

<p>The slider or handles can re re-enabled using the <code>enable</code> method.</p>

<div class="example">
<div id="disable1"></div>
Expand Down
7 changes: 3 additions & 4 deletions documentation/more/disable-all.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
// To disable
slider.setAttribute('disabled', true);
slider.noUiSlider.disable();

// To re-enable
slider.removeAttribute('disabled');
slider.noUiSlider.enable();

// To disable one handle
var origins = slider.querySelectorAll('.noUi-origin');
origins[0].setAttribute('disabled', true);
slider.noUiSlider.disable(1);
17 changes: 8 additions & 9 deletions documentation/more/disable.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@ var slider1 = document.getElementById('disable1'),
slider2 = document.getElementById('disable2'),
checkbox1 = document.getElementById('checkbox1'),
checkbox2 = document.getElementById('checkbox2'),
checkbox3 = document.getElementById('checkbox3'),
origins = slider2.querySelectorAll('.noUi-origin');
checkbox3 = document.getElementById('checkbox3');

function toggle(element) {
function toggle(checkbox, slider, handleNumber) {

// If the checkbox is checked, disabled the slider.
// Otherwise, re-enable it.
if (this.checked) {
element.setAttribute('disabled', true);
if (checkbox.checked) {
slider.noUiSlider.disable(handleNumber);
} else {
element.removeAttribute('disabled');
slider.noUiSlider.enable(handleNumber);
}
}

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

checkbox1.addEventListener('click', function () {
toggle.call(this, slider1);
toggle(this, slider1);
});

checkbox2.addEventListener('click', function () {
toggle.call(this, origins[0]);
toggle(this, slider2, 0);
});

checkbox3.addEventListener('click', function () {
toggle.call(this, origins[1]);
toggle(this, slider2, 1);
});
10 changes: 10 additions & 0 deletions documentation/reference.php
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,16 @@
<td><code>slider.noUiSlider.reset()</code></td>
<td><em>[none]</em></td>
</tr>
<tr>
<td><a href="/nouislider/more/#section-disable">disable</a></td>
<td><code>slider.noUiSlider.disable()</code></td>
<td><em>[none]</em>, <code>"number"</code></td>
</tr>
<tr>
<td><a href="/nouislider/more/#section-disable">enable</a></td>
<td><code>slider.noUiSlider.enable()</code></td>
<td><em>[none]</em>, <code>"number"</code></td>
</tr>
<tr>
<td><a href="/nouislider/more/#section-update">updateOptions</a></td>
<td><code>slider.noUiSlider.updateOptions(...)</code></td>
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nouislider",
"version": "15.6.1",
"version": "15.7.0",
"main": "dist/nouislider.js",
"style": "dist/nouislider.min.css",
"types": "dist/nouislider.d.ts",
Expand Down
42 changes: 39 additions & 3 deletions src/nouislider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ type SubRange = number | WrappedSubRange;
interface Range {
min: SubRange;
max: SubRange;

[key: `${number}%`]: SubRange;
}

Expand Down Expand Up @@ -204,6 +205,8 @@ export interface API {
set: (input: number | string | (number | string)[], fireSetEvent?: boolean, exactInput?: boolean) => void;
setHandle: (handleNumber: number, value: number | string, fireSetEvent?: boolean, exactInput?: boolean) => void;
reset: (fireSetEvent?: boolean) => void;
disable: (handleNumber?: number) => void;
enable: (handleNumber?: number) => void;
options: Options;
updateOptions: (optionsToUpdate: UpdatableOptions, fireSetEvent: boolean) => void;
target: HTMLElement;
Expand All @@ -218,6 +221,10 @@ interface TargetElement extends HTMLElement {
noUiSlider?: API;
}

interface Origin extends HTMLElement {
handle: HTMLElement;
}

interface CSSStyleDeclarationIE10 extends CSSStyleDeclaration {
msTransform?: string;
}
Expand Down Expand Up @@ -1357,7 +1364,7 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
// Slider DOM Nodes
const scope_Target = target;
let scope_Base: HTMLElement;
let scope_Handles: HTMLElement[];
let scope_Handles: Origin[];
let scope_Connects: (HTMLElement | false)[];
let scope_Pips: HTMLElement | null;
let scope_Tooltips: (HTMLElement | false)[] | null;
Expand Down Expand Up @@ -1393,7 +1400,7 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
}

// Append a origin to the base
function addOrigin(base: HTMLElement, handleNumber: number): HTMLElement {
function addOrigin(base: HTMLElement, handleNumber: number): Origin {
const origin = addNodeTo(base, options.cssClasses.origin);
const handle = addNodeTo(origin, options.cssClasses.handle);

Expand Down Expand Up @@ -1426,7 +1433,9 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
addClass(handle, options.cssClasses.handleUpper);
}

return origin;
(origin as Origin).handle = handle;

return origin as Origin;
}

// Insert nodes for connect elements
Expand Down Expand Up @@ -1504,6 +1513,31 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
return handleOrigin.hasAttribute("disabled");
}

function disable(handleNumber?: number): void {
if (handleNumber !== null && handleNumber !== undefined) {
scope_Handles[handleNumber].setAttribute("disabled", "");
scope_Handles[handleNumber].handle.removeAttribute("tabindex");
} else {
scope_Target.setAttribute("disabled", "");
scope_Handles.forEach(function (handle) {
handle.handle.removeAttribute("tabindex");
});
}
}

function enable(handleNumber?: number): void {
if (handleNumber !== null && handleNumber !== undefined) {
scope_Handles[handleNumber].removeAttribute("disabled");
scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
} else {
scope_Target.removeAttribute("disabled");
scope_Handles.forEach(function (handle) {
handle.removeAttribute("disabled");
handle.handle.setAttribute("tabindex", "0");
});
}
}

function removeTooltips(): void {
if (scope_Tooltips) {
removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
Expand Down Expand Up @@ -3013,6 +3047,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
set: valueSet,
setHandle: valueSetHandle,
reset: valueReset,
disable: disable,
enable: enable,
// Exposed for unit testing, don't use this in your application.
__moveHandles: function (upward: boolean, proposal: number, handleNumbers: number[]) {
moveHandles(upward, proposal, scope_Locations, handleNumbers);
Expand Down

0 comments on commit bccf966

Please sign in to comment.