Slider generator
Discount percentages, quantity selection and confidence scores are natural fits for lightning-slider. Style track, fill and thumb color so the current value is unambiguous at a glance.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-slider
label="Discount %"
min="0"
max="100"
value={value}
class="studio-slider"
onchange={handleChange}
></lightning-slider>
</template>Design tips for sliders
- Always show the numeric value next to the slider — position alone is hard to read precisely.
- Use a high-contrast thumb color against the track so the current position is easy to spot.
- Reserve sliders for ranges where approximate input is acceptable; use a number input for exact values.