The range-group component helps us to create a more complete range field with a value display and button control.

Technical Details

  • It uses native Spruce elements and styling, so the component is mainly about a small JS.
  • On the .form-label__value element, you can set a data-suffix value to add a unit at the end of the value display.
  • It automatically gets the step, min, and max values.
  • You should always use a proper aria-label value.