Overview
SliderComponent creates an interactive slider (HTML range input) for selecting numeric values. It extends ValueComponent<number> and is ideal for settings that require a value within a specific range.
Constructor
The parent HTML element where the slider will be created
const slider = new SliderComponent(containerEl);
Properties
Direct access to the underlying HTML input element (type=“range”)
Whether the slider is currently disabled
Methods
setLimits
Sets the minimum, maximum, and step values for the slider.
The minimum value (or null to unset)
The maximum value (or null to unset)
The increment step size, or “any” for no stepping
slider.setLimits(0, 100, 5); // Min: 0, Max: 100, Step: 5
slider.setLimits(0, 1, 0.1); // For decimal values
slider.setLimits(0, 10, 'any'); // No stepping constraint
this (for method chaining)
setValue
Sets the current value of the slider.
Returns: this (for method chaining)
getValue
Retrieves the current numeric value of the slider.
const currentValue = slider.getValue();
// Returns: number
number - The current slider value
getValuePretty
Retrieves the current value as a formatted string.
const prettyValue = slider.getValuePretty();
// Returns: "50" (as a string)
string - The current value formatted as a string
setInstant
Sets whether the value updates while dragging or only after releasing.
true to update value continuously while dragging, false to update only on release
slider.setInstant(true); // Update while dragging
this (for method chaining)
Enables a dynamic tooltip that shows the current value while hovering or dragging.
slider.setDynamicTooltip();
this (for method chaining)
Manually displays the tooltip.
onChange
Registers a callback function that executes when the slider value changes.
callback
(value: number) => any
required
Function to call when the value changes. Receives the new numeric value.
slider.onChange((value) => {
console.log(`Slider value: ${value}`);
// Save to settings
});
this (for method chaining)
setDisabled
Enables or disables the slider.
Whether the slider should be disabled
slider.setDisabled(true);
this (for method chaining)
then
Facilitates method chaining with a callback.
cb
(component: this) => any
required
Callback function that receives the component instance
slider.then((component) => {
component.setValue(50);
});
this (for method chaining)
Usage Examples
Basic Slider
new Setting(containerEl)
.setName("Volume")
.setDesc("Set the audio volume (0-100)")
.addSlider((slider) => {
slider
.setLimits(0, 100, 1)
.setValue(this.plugin.settings.volume)
.setDynamicTooltip()
.onChange(async (value) => {
this.plugin.settings.volume = value;
await this.plugin.saveSettings();
});
});
Slider with Live Preview
new Setting(containerEl)
.setName("Opacity")
.setDesc("Adjust transparency (0-100%)")
.addSlider((slider) => {
slider
.setLimits(0, 100, 5)
.setValue(this.plugin.settings.opacity)
.setDynamicTooltip()
.setInstant(true) // Update while dragging
.onChange(async (value) => {
this.plugin.settings.opacity = value;
await this.plugin.saveSettings();
// Apply opacity in real-time
this.plugin.updateOpacity(value / 100);
});
});
Decimal Slider
new Setting(containerEl)
.setName("Font Scale")
.setDesc("Adjust text size (0.5x to 2.0x)")
.addSlider((slider) => {
slider
.setLimits(0.5, 2.0, 0.1)
.setValue(this.plugin.settings.fontScale)
.setDynamicTooltip()
.onChange(async (value) => {
this.plugin.settings.fontScale = value;
await this.plugin.saveSettings();
document.body.style.fontSize = `${value}em`;
});
});
Slider with Custom Display
const valueDisplay = containerEl.createEl("span");
new Setting(containerEl)
.setName("Delay")
.setDesc("Set notification delay")
.addSlider((slider) => {
slider
.setLimits(0, 10, 1)
.setValue(this.plugin.settings.delay)
.onChange(async (value) => {
this.plugin.settings.delay = value;
await this.plugin.saveSettings();
// Update custom display
valueDisplay.setText(`${value} seconds`);
});
// Initialize display
valueDisplay.setText(`${this.plugin.settings.delay} seconds`);
});
Slider with No Stepping
new Setting(containerEl)
.setName("Precise Value")
.setDesc("Select any value between 0 and 1")
.addSlider((slider) => {
slider
.setLimits(0, 1, 'any') // No stepping
.setValue(this.plugin.settings.preciseValue)
.setDynamicTooltip()
.onChange(async (value) => {
this.plugin.settings.preciseValue = value;
await this.plugin.saveSettings();
});
});
Disabled Slider
new Setting(containerEl)
.setName("Quality")
.setDesc("Available in premium version")
.addSlider((slider) => {
slider
.setLimits(1, 10, 1)
.setValue(5)
.setDisabled(true);
});
Slider with Threshold Warning
new Setting(containerEl)
.setName("Max File Size")
.setDesc("Maximum file size in MB")
.addSlider((slider) => {
slider
.setLimits(1, 100, 1)
.setValue(this.plugin.settings.maxFileSize)
.setDynamicTooltip()
.onChange(async (value) => {
this.plugin.settings.maxFileSize = value;
await this.plugin.saveSettings();
// Warn if value is too high
if (value > 50) {
new Notice("Warning: Large files may affect performance");
}
});
});
Slider with Snap Points
new Setting(containerEl)
.setName("Grid Size")
.setDesc("Set grid spacing")
.addSlider((slider) => {
slider
.setLimits(10, 100, 10) // Snaps to multiples of 10
.setValue(this.plugin.settings.gridSize)
.setDynamicTooltip()
.onChange(async (value) => {
this.plugin.settings.gridSize = value;
await this.plugin.saveSettings();
this.plugin.updateGrid(value);
});
});
Slider with Percentage Display
new Setting(containerEl)
.setName("Zoom Level")
.setDesc("Adjust zoom percentage")
.addSlider((slider) => {
slider
.setLimits(50, 200, 10)
.setValue(this.plugin.settings.zoomLevel)
.setDynamicTooltip()
.onChange(async (value) => {
this.plugin.settings.zoomLevel = value;
await this.plugin.saveSettings();
this.plugin.setZoom(value / 100);
});
});
Direct DOM Access
const slider = new SliderComponent(containerEl);
slider
.setLimits(0, 100, 1)
.setValue(50);
// Access the underlying input element
slider.sliderEl.addClass("custom-slider");
slider.sliderEl.style.width = "300px";
See Also
