diff --git a/.eslintrc.json b/.eslintrc.json
index 67d9aade..ff3c8b3e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -14,7 +14,8 @@
"one-var": ["error", "never"],
"no-var": "off",
"no-console": "error",
- "prefer-spread": "off"
+ "prefer-spread": "off",
+ "@typescript-eslint/no-explicit-any": "off"
},
"env": {
"browser": true,
diff --git a/documentation/slider-options.php b/documentation/slider-options.php
index af14c64c..33326b76 100644
--- a/documentation/slider-options.php
+++ b/documentation/slider-options.php
@@ -450,32 +450,60 @@
Handles in the slider can receive keyboard focus and be moved by arrow keys.
+ Keyboard support can be disabled by setting the keyboardSupport
option to false
.
+
When moved by the arrow keys on a keyboard, handles obey the step
value for the range they are in.
When moving in a range that has no step
value set, handles move by 10% of the range they are in.
- This default can be changed using the keyboardDefaultStep
option.
+ This default can be changed using the keyboardDefaultStep
option. (view example 1)
+
+ Changing the keyboardMultiplier
option will multiply the default step by the set amount.
+ This is useful when dealing with larger value ranges but smaller step size. (view example 2)
- The Page Up and Page Down keys can be used to make larger steps through the slider range. By default, the page keys
- multiply the default step by 5. This can be changed using the keyboardPageMultiplier
option.
+ The Page Up and Page Down keys can be used to make larger steps through the slider range. By default, the page keys
+ multiply the default step by 5. This can be changed using the keyboardPageMultiplier
option. (view example 2)
- Keyboard support can be disabled by setting the keyboardSupport
option to false
.
+
Example 1
+
+
+ Here the keyboard step size is 20
which is equal to range / keyboardDefaultStep
.
+
+
+ Example 2
+
+
+ Here the keyboard step size is 50
which is equal to step * keyboardMultiplier
.
+
+
+
+
+
+
+
keyboardSupport
Default
true
-
Accepted values
true
, false
diff --git a/documentation/slider-options/keyboard-support-link.js b/documentation/slider-options/keyboard-support-link.js
new file mode 100644
index 00000000..94c50455
--- /dev/null
+++ b/documentation/slider-options/keyboard-support-link.js
@@ -0,0 +1,9 @@
+var keyboardSupportValue = document.getElementById('slider-keyboard-value');
+keyboardSupport.noUiSlider.on('update', function (values, handle) {
+ keyboardSupportValue.innerHTML = values[handle];
+});
+
+var keyboardSupport2Value = document.getElementById('slider-keyboard-2-value');
+keyboardSupport2.noUiSlider.on('update', function (values, handle) {
+ keyboardSupport2Value.innerHTML = values[handle];
+});
diff --git a/documentation/slider-options/keyboard-support.js b/documentation/slider-options/keyboard-support.js
index 8fd5b840..85499128 100644
--- a/documentation/slider-options/keyboard-support.js
+++ b/documentation/slider-options/keyboard-support.js
@@ -1,12 +1,33 @@
-var keyboardSlider = document.getElementById('slider-keyboard');
+/**
+ * Example 1
+ */
+var keyboardSupport = document.getElementById('slider-keyboard')
-noUiSlider.create(keyboardSlider, {
- start: [10, 90],
- keyboardSupport: true, // Default true
+noUiSlider.create(keyboardSupport, {
+ start: 10,
+ keyboardSupport: true, // Default true
+ keyboardDefaultStep: 5, // Default 10
keyboardPageMultiplier: 10, // Default 5
- keyboardDefaultStep: 5, // Default 10
range: {
'min': 0,
'max': 100
}
});
+
+/**
+ * Example 2
+ */
+var keyboardSupport2 = document.getElementById('slider-keyboard-2')
+
+noUiSlider.create(keyboardSupport2, {
+ start: 100,
+ step: 1,
+ keyboardSupport: true, // Default true
+ keyboardDefaultStep: 5, // Default 10
+ keyboardPageMultiplier: 100,// Default 5
+ keyboardMultiplier: 50, // Default 1
+ range: {
+ 'min': 0,
+ 'max': 1000
+ }
+});
diff --git a/src/nouislider.ts b/src/nouislider.ts
index d14287a2..f9143e90 100644
--- a/src/nouislider.ts
+++ b/src/nouislider.ts
@@ -136,6 +136,7 @@ export interface Options extends UpdatableOptions {
behaviour?: string;
keyboardSupport?: boolean;
keyboardPageMultiplier?: number;
+ keyboardMultiplier?: number;
keyboardDefaultStep?: number;
documentElement?: HTMLElement;
cssPrefix?: string;
@@ -166,6 +167,7 @@ interface ParsedOptions {
tooltips?: (boolean | PartialFormatter)[];
keyboardSupport: boolean;
keyboardPageMultiplier: number;
+ keyboardMultiplier: number;
keyboardDefaultStep: number;
documentElement?: HTMLElement;
cssPrefix?: string | false;
@@ -916,6 +918,14 @@ function testKeyboardPageMultiplier(parsed: ParsedOptions, entry: unknown): void
parsed.keyboardPageMultiplier = entry;
}
+function testKeyboardMultiplier(parsed: ParsedOptions, entry: unknown): void {
+ if (!isNumeric(entry)) {
+ throw new Error("noUiSlider: 'keyboardMultiplier' is not numeric.");
+ }
+
+ parsed.keyboardMultiplier = entry;
+}
+
function testKeyboardDefaultStep(parsed: ParsedOptions, entry: unknown): void {
if (!isNumeric(entry)) {
throw new Error("noUiSlider: 'keyboardDefaultStep' is not numeric.");
@@ -1249,6 +1259,7 @@ function testOptions(options: Options): ParsedOptions {
const tests: { [key in keyof Options]: { r: boolean; t: (parsed: ParsedOptions, entry: unknown) => void } } = {
step: { r: false, t: testStep },
keyboardPageMultiplier: { r: false, t: testKeyboardPageMultiplier },
+ keyboardMultiplier: { r: false, t: testKeyboardMultiplier },
keyboardDefaultStep: { r: false, t: testKeyboardDefaultStep },
start: { r: true, t: testStart },
connect: { r: true, t: testConnect },
@@ -1280,6 +1291,7 @@ function testOptions(options: Options): ParsedOptions {
cssPrefix: "noUi-",
cssClasses: cssClasses,
keyboardPageMultiplier: 5,
+ keyboardMultiplier: 1,
keyboardDefaultStep: 10
} as UpdatableOptions;
@@ -2239,7 +2251,6 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
let to;
if (isUp || isDown) {
- const multiplier = options.keyboardPageMultiplier;
const direction = isDown ? 0 : 1;
const steps = getNextStepsForHandle(handleNumber);
let step = steps[direction];
@@ -2259,7 +2270,9 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
}
if (isLargeUp || isLargeDown) {
- step *= multiplier;
+ step *= options.keyboardPageMultiplier;
+ } else {
+ step *= options.keyboardMultiplier;
}
// Step over zero-length ranges (#948);
@@ -2482,7 +2495,13 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
// Moves handle(s) by a percentage
// (bool, % to move, [% where handle started, ...], [index in scope_Handles, ...])
- function moveHandles(upward: boolean, proposal: number, locations: number[], handleNumbers: number[], connect?: HTMLElement): void {
+ function moveHandles(
+ upward: boolean,
+ proposal: number,
+ locations: number[],
+ handleNumbers: number[],
+ connect?: HTMLElement
+ ): void {
const proposals = locations.slice();
// Store first handle now, so we still have it in case handleNumbers is reversed