Edit in GitHubLog an issue


Since: UXP 4.1, PS 22.0.0

Renders a slider with optional associated label.




Copied to your clipboard
1<sp-slider min="0" max="100" value="50">
2 <sp-label slot="label">Slider Label</sp-label>

Variants and states#

There are several different variants for sliders.


Indicates that the slider is disabled.

Copied to your clipboard
<sp-slider disabled min="0" max="100" value="50"></sp-slider>


Fills one side of the slider track. Which side is specified with fill-offset.

Copied to your clipboard
1<sp-slider variant="filled" fill-offset="left" min="0" max="100" value="50"></sp-slider>
2<sp-slider variant="filled" fill-offset="right" min="0" max="100" value="50"></sp-slider>

Custom unit#

You can specify a custom unit for the slider value -- such as "%".

Copied to your clipboard
<sp-slider value-label="%" min="0" max="100" value="50"></sp-slider>

Hiding the value#

You can hide the slider value.

Copied to your clipboard
<sp-slider show-value="false" min="0" max="100" value="50"></sp-slider>

Responding to events#

You can respond to changes on the slider using the change and input events.

Copied to your clipboard
1document.querySelector(".yourSlider").addEventListener("input", evt => {
2 console.log(`New value: ${evt.target.value}`);
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.