Range

A slider control for approximate values where exact entry is less important.

When To Use

Use	Avoid
A slider control for approximate values where exact entry is less important.	Avoid using this component when the content has a different job or needs a simpler plain-text treatment.
Use real form controls with visible labels, help text, validation, input purpose, keyboard access, and clear submit behaviour.	Avoid changing approved colours, typography, logo artwork, or class names to create a local style guide.
Use the starter markup as a copy/paste baseline for websites, Ghost HTML blocks, generated pages, or print previews.	Avoid copying placeholder IDs, links, contact details, or image paths without replacing them.

Example

Observation confidence

Scale from 1 low confidence to 5 high confidence. Current example position is 3.

Code

CSS Imports

@import "@landcare-design-system/css/dist/landcare.css";
@import "@landcare-design-system/css/dist/components.css";

Starter Markup

<div class="lds-field lds-range-field">
  <label class="lds-label" for="confidence">Observation confidence</label>
  <div class="lds-range-labels" aria-hidden="true">
    <span>Low confidence</span>
    <span>High confidence</span>
  </div>
  <input class="lds-range" id="confidence" name="confidence" type="range" min="1" max="5" step="1" value="3" aria-describedby="confidence-scale">
  <ol class="lds-range-ticks" aria-hidden="true">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ol>
  <p class="lds-help-text" id="confidence-scale">Scale from 1 low confidence to 5 high confidence. Current example position is 3.</p>
</div>

Class Reference

Class	Use
`.lds-field`	Stacks a label, control, and help or validation text.
`.lds-range-field`	Groups a range input with endpoint labels, measured tick labels, and help text.
`.lds-label`	Applies the approved label typography and weight.
`.lds-range-labels`	Places the left and right endpoint meanings above the range control.
`.lds-range`	Styles a native range input while preserving keyboard and form behaviour.
`.lds-range-ticks`	Shows measured positions that correspond to the range values.
`.lds-help-text`	Applies caption-sized supporting text.

Review Notes

Web

Use real form controls with visible labels, help text, validation, input purpose, keyboard access, and clear submit behaviour.

Print

Do not send online controls straight to paper. Use a separate reviewed print pattern when the final material is filled out by hand.

States And Variants

Document required, optional, error, success, disabled, focus, and read-only states.

Checklist

Brand colours, typography, and logo use are inherited from the approved master brand.
The first-read message or action is clear.
Labels, headings, links, and alternative text are meaningful.
Keyboard focus, colour contrast, and reading order are covered where the component is interactive.
The component survives its final output: mobile, desktop, Ghost CMS, A4 print, poster, signage, or email.