fly-range

Source component

Inputs with class fly-range

Target component

PlumaSlider

Mapping

• replace <input type="range" class="fly-range"> with <PlumaSlider>
• disabled becomes @isDisabled
• min becomes @minValue
• max becomes @maxValue
• step becomes @step
• value becomes @value
• use @onChange or @onInput to handle value changes (both are called with the number value)
• use an accessible label with @label, @ariaLabel, or @ariaLabelledby

Examples

Source:

<input
  class="fly-range"
  aria-label="Percent of users to go down this path"
  value={{@value}}
  min={{this.min}}
  max={{this.max}}
  step={{this.step}}
  {{on "input" this.onInput}}
/>

Target:

<PlumaSlider
  @ariaLabel="Percent of users to go down this path"
  @value={{@value}}
  @min={{this.min}}
  @max={{this.max}}
  @step={{this.step}}
  @onInput={{this.onInput}}
/>