0
# Value Management
1

2
Methods for getting and setting slider values programmatically, with support for individual handle control and validation.
3

4
## Capabilities
5

6
### get()
7

8
Returns the current values of all slider handles.
9

10
```javascript { .api }
11
/**
12
 * Get current slider values
13
 * @returns Single value for single-handle sliders, array for multi-handle sliders
14
 */
15
slider.noUiSlider.get(): string | string[];
16
```
17

18
**Usage Examples:**
19

20
```javascript
21
// Single handle slider
22
const singleValue = singleSlider.noUiSlider.get();
23
console.log(singleValue); // "42.00"
24

25
// Multi-handle slider  
26
const rangeValues = rangeSlider.noUiSlider.get();
27
console.log(rangeValues); // ["20.00", "80.00"]
28

29
// With custom formatting
30
const formattedValues = currencySlider.noUiSlider.get();
31
console.log(formattedValues); // ["$1,200", "$3,400"]
32
```
33

34
### set()
35

36
Sets values for all slider handles.
37

38
```javascript { .api }
39
/**
40
 * Set slider values
41
 * @param values - Single value or array of values to set
42
 * @param fireSetEvent - Whether to fire 'set' event (default: true)
43
 * @param exactInput - Skip stepping validation (default: false)
44
 */
45
slider.noUiSlider.set(
46
    values: number | number[], 
47
    fireSetEvent?: boolean, 
48
    exactInput?: boolean
49
): void;
50
```
51

52
**Usage Examples:**
53

54
```javascript
55
// Set single value
56
singleSlider.noUiSlider.set(75);
57

58
// Set multiple values
59
rangeSlider.noUiSlider.set([30, 70]);
60

61
// Set values without triggering events
62
rangeSlider.noUiSlider.set([40, 60], false);
63

64
// Set values with exact positioning (skip stepping)
65
rangeSlider.noUiSlider.set([33.33, 66.67], true, true);
66

67
// Partial updates using null
68
rangeSlider.noUiSlider.set([null, 90]);  // Only update second handle
69
rangeSlider.noUiSlider.set([10, null]);  // Only update first handle
70
```
71

72
### setHandle()
73

74
Sets the value for a specific handle by index.
75

76
```javascript { .api }
77
/**
78
 * Set value for a specific handle
79
 * @param handleNumber - Zero-based handle index
80
 * @param value - Value to set
81
 * @param fireSetEvent - Whether to fire 'set' event (default: undefined -> true)
82
 * @param exactInput - Skip stepping validation (default: false)
83
 * @throws Error if handleNumber is invalid
84
 */
85
slider.noUiSlider.setHandle(
86
    handleNumber: number, 
87
    value: number, 
88
    fireSetEvent?: boolean, 
89
    exactInput?: boolean
90
): void;
91
```
92

93
**Usage Examples:**
94

95
```javascript
96
// Set first handle (index 0)
97
rangeSlider.noUiSlider.setHandle(0, 25);
98

99
// Set second handle (index 1)
100
rangeSlider.noUiSlider.setHandle(1, 75);
101

102
// Set without triggering events
103
rangeSlider.noUiSlider.setHandle(0, 30, false);
104

105
// Set with exact positioning
106
rangeSlider.noUiSlider.setHandle(1, 83.5, true, true);
107

108
// Error handling
109
try {
110
    rangeSlider.noUiSlider.setHandle(5, 50);  // Invalid handle index
111
} catch (error) {
112
    console.error(error.message); // "noUiSlider: invalid handle number, got: 5"
113
}
114
```
115

116
### reset()
117

118
Resets the slider to its initial values.
119

120
```javascript { .api }
121
/**
122
 * Reset slider to initial start values
123
 * @param fireSetEvent - Whether to fire 'set' event (default: undefined -> true)
124
 */
125
slider.noUiSlider.reset(fireSetEvent?: boolean): void;
126
```
127

128
**Usage Examples:**
129

130
```javascript
131
// Reset to initial values
132
slider.noUiSlider.reset();
133

134
// Reset without triggering events
135
slider.noUiSlider.reset(false);
136

137
// Example: Reset button implementation
138
document.getElementById('reset-button').addEventListener('click', function() {
139
    slider.noUiSlider.reset();
140
});
141
```
142

143
### steps()
144

145
Returns the available step increments and decrements for each handle.
146

147
```javascript { .api }
148
/**
149
 * Get available step increments for each handle
150
 * @returns Array of [decrement, increment] tuples for each handle
151
 */
152
slider.noUiSlider.steps(): [number | null, number | null][];
153
```
154

155
**Usage Examples:**
156

157
```javascript
158
// Get available steps for a dual-handle slider
159
const stepOptions = rangeSlider.noUiSlider.steps();
160
console.log(stepOptions); 
161
// [[10, 5], [15, null]]  // First handle can -10 or +5, second can +15 but not increment
162

163
// Use with stepping controls
164
const prevButton = document.getElementById('prev');
165
const nextButton = document.getElementById('next');
166

167
function updateStepButtons() {
168
    const steps = slider.noUiSlider.steps();
169
    const [decrement, increment] = steps[0]; // For first handle
170
    
171
    prevButton.disabled = decrement === null;
172
    nextButton.disabled = increment === null;
173
}
174

175
// Update button states on slider changes
176
slider.noUiSlider.on('update', updateStepButtons);
177
```
178

179
## Value Formatting and Parsing
180

181
### Format Option Integration
182

183
Values returned by `get()` are processed through the `format.to()` function if provided:
184

185
```javascript
186
// Slider with currency formatting
187
noUiSlider.create(element, {
188
    start: [1000, 3000],
189
    range: { min: 0, max: 5000 },
190
    format: {
191
        to: function(value) {
192
            return '$' + Math.round(value).toLocaleString();
193
        },
194
        from: function(value) {
195
            return Number(value.replace(/[$,]/g, ''));
196
        }
197
    }
198
});
199

200
// get() returns formatted values
201
const values = element.noUiSlider.get();
202
console.log(values); // ["$1,000", "$3,000"]
203
```
204

205
### Value Parsing for set()
206

207
Values passed to `set()` and `setHandle()` are processed through `format.from()` if they are strings:
208

209
```javascript
210
// These are equivalent when using the currency formatter above:
211
slider.noUiSlider.set([1500, 2500]);        // Numbers
212
slider.noUiSlider.set(['$1,500', '$2,500']); // Formatted strings
213
```
214

215
## Value Constraints and Validation
216

217
### Stepping Behavior
218

219
By default, values are adjusted to conform to step settings:
220

221
```javascript
222
// Slider with step: 10
223
noUiSlider.create(element, {
224
    start: 50,
225
    step: 10,
226
    range: { min: 0, max: 100 }
227
});
228

229
// Value will be adjusted to nearest step
230
element.noUiSlider.set(47);  // Actually sets to 50
231
element.noUiSlider.set(53);  // Actually sets to 50
232

233
// Use exactInput to bypass stepping
234
element.noUiSlider.set(47, true, true);  // Sets exactly to 47
235
```
236

237
### Margin and Limit Constraints
238

239
Values are automatically adjusted to respect margin and limit settings:
240

241
```javascript
242
// Slider with margin: 10
243
noUiSlider.create(element, {
244
    start: [30, 70],
245
    margin: 10,
246
    range: { min: 0, max: 100 }
247
});
248

249
// Margin prevents handles from getting too close
250
element.noUiSlider.set([45, 50]);  // Second handle moves to maintain margin
251
console.log(element.noUiSlider.get()); // ["45.00", "55.00"]
252
```
253

254
### Padding Constraints
255

256
Padding prevents handles from getting too close to the edges:
257

258
```javascript
259
// Slider with padding
260
noUiSlider.create(element, {
261
    start: [20, 80],
262
    padding: [10, 15],  // 10 units from start, 15 from end
263
    range: { min: 0, max: 100 }
264
});
265

266
// Values are constrained by padding
267
element.noUiSlider.set([5, 95]);
268
console.log(element.noUiSlider.get()); // ["10.00", "85.00"]
269
```
270

271
## Null Values and Partial Updates
272

273
Use `null` in the values array to leave specific handles unchanged:
274

275
```javascript
276
// Only update the first handle
277
slider.noUiSlider.set([25, null]);
278

279
// Only update the second handle  
280
slider.noUiSlider.set([null, 75]);
281

282
// No effect - all values are null
283
slider.noUiSlider.set([null, null]);
284

285
// Mixed updates
286
slider.noUiSlider.set([10, null, 90]);  // Three-handle slider
287
```
288

289
## Event Integration
290

291
### Automatic Event Firing
292

293
Value changes trigger events by default:
294

295
```javascript
296
slider.noUiSlider.on('set', function(values, handle) {
297
    console.log('Value set on handle', handle, ':', values[handle]);
298
});
299

300
// This triggers the 'set' event
301
slider.noUiSlider.set([40, 60]);
302

303
// This does not trigger the 'set' event
304
slider.noUiSlider.set([40, 60], false);
305
```
306

307
### Event Suppression
308

309
Suppress events during programmatic updates:
310

311
```javascript
312
// Bulk updates without intermediate events
313
function setBulkValues(newValues) {
314
    slider.noUiSlider.set(newValues, false);  // No events
315
    
316
    // Manually fire update event after all changes
317
    slider.noUiSlider.get(); // Get current values
318
    // Trigger custom handling...
319
}
320
```
321

322
## Error Handling
323

324
### Common Errors
325

326
```javascript
327
// Invalid handle number in setHandle()
328
try {
329
    slider.noUiSlider.setHandle(10, 50);
330
} catch (error) {
331
    console.error(error.message); 
332
    // "noUiSlider (14.7.0): invalid handle number, got: 10"
333
}
334

335
// Invalid values are ignored or adjusted
336
slider.noUiSlider.set([NaN, 50]);     // NaN ignored, 50 applied
337
slider.noUiSlider.set(['invalid']);   // String parsing fails, ignored
338
slider.noUiSlider.set([]);            // Empty array ignored
339
```
340

341
### Value Validation
342

343
```javascript
344
// Values outside range are clamped
345
slider.noUiSlider.set([-10, 150]);  // Clamped to [0, 100]
346

347
// Invalid formats with custom formatter
348
slider.noUiSlider.set(['$invalid', '$2,000']);  // First value ignored
349
```