0
# Configuration Updates
1

2
Runtime configuration updates and slider reconfiguration capabilities for dynamic slider behavior modification.
3

4
## Capabilities
5

6
### updateOptions()
7

8
Updates slider configuration at runtime, allowing dynamic reconfiguration without recreating the slider.
9

10
```javascript { .api }
11
/**
12
 * Update slider configuration at runtime
13
 * @param optionsToUpdate - Partial configuration object with options to update
14
 * @param fireSetEvent - Whether to fire 'set' event after update (default: undefined -> true)
15
 */
16
slider.noUiSlider.updateOptions(
17
    optionsToUpdate: Partial<SliderOptions>, 
18
    fireSetEvent?: boolean
19
): void;
20
```
21

22
**Usage Examples:**
23

24
```javascript
25
// Update range dynamically
26
slider.noUiSlider.updateOptions({
27
    range: {
28
        'min': 0,
29
        'max': 200  // Changed from 100 to 200
30
    }
31
});
32

33
// Update multiple options
34
slider.noUiSlider.updateOptions({
35
    step: 5,
36
    margin: 10,
37
    animate: false
38
});
39

40
// Update without triggering events
41
slider.noUiSlider.updateOptions({
42
    start: [30, 70]
43
}, false);
44
```
45

46
### options Property
47

48
Access to the current configuration object.
49

50
```javascript { .api }
51
/**
52
 * Current slider configuration (read-only)
53
 */
54
slider.noUiSlider.options: SliderOptions;
55
```
56

57
**Usage Examples:**
58

59
```javascript
60
// Get current configuration
61
const currentConfig = slider.noUiSlider.options;
62
console.log('Current range:', currentConfig.range);
63
console.log('Current step:', currentConfig.step);
64

65
// Use current config to make conditional updates
66
if (currentConfig.step !== 10) {
67
    slider.noUiSlider.updateOptions({ step: 10 });
68
}
69
```
70

71
## Updatable Options
72

73
### Value and Range Options
74

75
#### range
76
Update the value range and stepping configuration.
77

78
```javascript
79
// Basic range update
80
slider.noUiSlider.updateOptions({
81
    range: {
82
        'min': -50,
83
        'max': 150
84
    }
85
});
86

87
// Complex range with stepping
88
slider.noUiSlider.updateOptions({
89
    range: {
90
        'min': [0, 1],      // Min 0, step 1
91
        '25%': [25, 5],     // At 25%, value 25, step 5
92
        '75%': [75, 10],    // At 75%, value 75, step 10
93
        'max': 100
94
    }
95
});
96
```
97

98
#### step
99
Update the step size for value increments.
100

101
```javascript
102
slider.noUiSlider.updateOptions({
103
    step: 0.5  // Changed from integer to decimal stepping
104
});
105
```
106

107
#### start
108
Update initial/current values (will reposition handles).
109

110
```javascript
111
slider.noUiSlider.updateOptions({
112
    start: [25, 75]  // Moves handles to new positions
113
});
114
```
115

116
### Constraint Options
117

118
#### margin
119
Update minimum distance between handles.
120

121
```javascript
122
slider.noUiSlider.updateOptions({
123
    margin: 15  // Handles must be at least 15 units apart
124
});
125
```
126

127
#### limit
128
Update maximum distance between handles.
129

130
```javascript
131
slider.noUiSlider.updateOptions({
132
    limit: 50  // Handles cannot be more than 50 units apart
133
});
134
```
135

136
#### padding
137
Update padding from slider edges.
138

139
```javascript
140
// Symmetric padding
141
slider.noUiSlider.updateOptions({
142
    padding: 10
143
});
144

145
// Asymmetric padding
146
slider.noUiSlider.updateOptions({
147
    padding: [5, 15]  // 5 from start, 15 from end
148
});
149
```
150

151
### Behavior Options
152

153
#### snap
154
Toggle snap-to-step behavior.
155

156
```javascript
157
slider.noUiSlider.updateOptions({
158
    snap: true  // Enable snapping to step values
159
});
160
```
161

162
#### animate
163
Toggle animation behavior.
164

165
```javascript
166
slider.noUiSlider.updateOptions({
167
    animate: false  // Disable smooth animations
168
});
169
```
170

171
### UI Options
172

173
#### format
174
Update value formatting.
175

176
```javascript
177
// Switch to percentage formatting
178
slider.noUiSlider.updateOptions({
179
    format: {
180
        to: function(value) {
181
            return value.toFixed(1) + '%';
182
        },
183
        from: function(value) {
184
            return parseFloat(value.replace('%', ''));
185
        }
186
    }
187
});
188
```
189

190
#### tooltips
191
Update tooltip configuration.
192

193
```javascript
194
// Enable tooltips
195
slider.noUiSlider.updateOptions({
196
    tooltips: true
197
});
198

199
// Custom tooltip formatting
200
slider.noUiSlider.updateOptions({
201
    tooltips: {
202
        to: function(value) {
203
            return '$' + Math.round(value);
204
        }
205
    }
206
});
207

208
// Per-handle tooltip configuration
209
slider.noUiSlider.updateOptions({
210
    tooltips: [true, false]  // First handle has tooltip, second doesn't
211
});
212
```
213

214
#### pips
215
Update scale markers.
216

217
```javascript
218
// Add pips
219
slider.noUiSlider.updateOptions({
220
    pips: {
221
        mode: 'count',
222
        values: 5,
223
        density: 3
224
    }
225
});
226

227
// Remove pips
228
slider.noUiSlider.updateOptions({
229
    pips: null
230
});
231
```
232

233
## Practical Usage Patterns
234

235
### Dynamic Range Adjustment
236

237
```javascript
238
// Adjust range based on data availability
239
function updateSliderRange(minValue, maxValue) {
240
    slider.noUiSlider.updateOptions({
241
        range: {
242
            'min': minValue,
243
            'max': maxValue
244
        }
245
    });
246
    
247
    // Ensure current values are within new range
248
    const currentValues = slider.noUiSlider.get();
249
    const adjustedValues = currentValues.map(val => {
250
        const num = parseFloat(val);
251
        return Math.max(minValue, Math.min(maxValue, num));
252
    });
253
    
254
    slider.noUiSlider.set(adjustedValues);
255
}
256

257
// Usage
258
updateSliderRange(0, 500);  // Expand range
259
updateSliderRange(10, 90);  // Contract range
260
```
261

262
### Responsive Configuration
263

264
```javascript
265
// Adjust configuration based on screen size
266
function updateSliderForScreenSize() {
267
    const isMobile = window.innerWidth < 768;
268
    
269
    slider.noUiSlider.updateOptions({
270
        step: isMobile ? 10 : 1,          // Larger steps on mobile
271
        margin: isMobile ? 20 : 5,        // More margin on mobile
272
        tooltips: isMobile ? false : true  // No tooltips on mobile
273
    });
274
}
275

276
// Apply on resize
277
window.addEventListener('resize', updateSliderForScreenSize);
278
updateSliderForScreenSize(); // Initial setup
279
```
280

281
### Mode Switching
282

283
```javascript
284
// Switch between different slider modes
285
function switchSliderMode(mode) {
286
    switch (mode) {
287
        case 'currency':
288
            slider.noUiSlider.updateOptions({
289
                format: {
290
                    to: value => '$' + Math.round(value).toLocaleString(),
291
                    from: value => Number(value.replace(/[$,]/g, ''))
292
                },
293
                step: 100,
294
                tooltips: true
295
            });
296
            break;
297
            
298
        case 'percentage':
299
            slider.noUiSlider.updateOptions({
300
                format: {
301
                    to: value => value.toFixed(1) + '%',
302
                    from: value => parseFloat(value.replace('%', ''))
303
                },
304
                step: 0.1,
305
                tooltips: true
306
            });
307
            break;
308
            
309
        case 'simple':
310
            slider.noUiSlider.updateOptions({
311
                format: {
312
                    to: value => Math.round(value).toString(),
313
                    from: Number
314
                },
315
                step: 1,
316
                tooltips: false
317
            });
318
            break;
319
    }
320
}
321
```
322

323
### Conditional Updates
324

325
```javascript
326
// Update options based on current state
327
function updateSliderBasedOnValue() {
328
    const values = slider.noUiSlider.get();
329
    const maxValue = Math.max(...values.map(parseFloat));
330
    
331
    if (maxValue > 80) {
332
        // High values - use larger steps and different formatting
333
        slider.noUiSlider.updateOptions({
334
            step: 10,
335
            format: {
336
                to: value => 'High: ' + Math.round(value),
337
                from: value => Number(value.replace('High: ', ''))
338
            }
339
        });
340
    } else {
341
        // Normal values
342
        slider.noUiSlider.updateOptions({
343
            step: 1,
344
            format: {
345
                to: value => Math.round(value).toString(),
346
                from: Number
347
            }
348
        });
349
    }
350
}
351

352
// Apply on value changes
353
slider.noUiSlider.on('change', updateSliderBasedOnValue);
354
```
355

356
### Configuration Persistence
357

358
```javascript
359
// Save and restore slider configuration
360
function saveSliderConfig() {
361
    const config = {
362
        range: slider.noUiSlider.options.range,
363
        step: slider.noUiSlider.options.step,
364
        margin: slider.noUiSlider.options.margin,
365
        values: slider.noUiSlider.get()
366
    };
367
    
368
    localStorage.setItem('sliderConfig', JSON.stringify(config));
369
}
370

371
function restoreSliderConfig() {
372
    const saved = localStorage.getItem('sliderConfig');
373
    if (saved) {
374
        const config = JSON.parse(saved);
375
        
376
        slider.noUiSlider.updateOptions({
377
            range: config.range,
378
            step: config.step,
379
            margin: config.margin,
380
            start: config.values
381
        });
382
    }
383
}
384

385
// Auto-save on changes
386
slider.noUiSlider.on('change', saveSliderConfig);
387
```
388

389
## Non-Updatable Options
390

391
Some options cannot be changed after slider creation and require recreating the slider:
392

393
- `connect` - Connection configuration
394
- `direction` - Text direction (ltr/rtl)
395
- `orientation` - Physical orientation (horizontal/vertical)
396
- `behaviour` - Interaction behaviors
397
- `keyboardSupport` - Keyboard navigation
398
- `keyboardPageMultiplier` - Keyboard step multipliers
399
- `keyboardDefaultStep` - Default keyboard step
400
- `cssPrefix` - CSS class prefix
401
- `cssClasses` - CSS class names
402
- `documentElement` - Document element reference
403

404
```javascript
405
// These options require slider recreation
406
function recreateSliderWithNewBehavior() {
407
    const currentValues = slider.noUiSlider.get();
408
    const currentRange = slider.noUiSlider.options.range;
409
    
410
    // Destroy current slider
411
    slider.noUiSlider.destroy();
412
    
413
    // Create new slider with different behavior
414
    noUiSlider.create(slider, {
415
        start: currentValues,
416
        range: currentRange,
417
        behaviour: 'drag-fixed',  // This requires recreation
418
        connect: true
419
    });
420
}
421
```
422

423
## Error Handling
424

425
```javascript
426
// Some updates may fail if they create invalid configurations
427
try {
428
    slider.noUiSlider.updateOptions({
429
        range: {
430
            'min': 100,
431
            'max': 0  // Invalid: min > max
432
        }
433
    });
434
} catch (error) {
435
    console.error('Invalid range configuration:', error.message);
436
}
437

438
// Values outside new range are automatically adjusted
439
slider.noUiSlider.updateOptions({
440
    range: { 'min': 0, 'max': 50 }  // Shrink range
441
});
442
// Current values above 50 will be adjusted to 50
443
```
444

445
## Performance Considerations
446

447
```javascript
448
// Batch updates for better performance
449
slider.noUiSlider.updateOptions({
450
    range: { 'min': 0, 'max': 200 },
451
    step: 5,
452
    margin: 10,
453
    format: newFormatter
454
});
455

456
// Instead of multiple separate updates:
457
// slider.noUiSlider.updateOptions({ range: { 'min': 0, 'max': 200 }});
458
// slider.noUiSlider.updateOptions({ step: 5 });
459
// slider.noUiSlider.updateOptions({ margin: 10 });
460
// slider.noUiSlider.updateOptions({ format: newFormatter });
461
```