MoreLesson 171Free preview

Range Sliders

This lesson is part of How To · All levels

Summary

This lesson discusses input range, a slider that allows users to select values within a specific range. The attributes min, max, step, and value set limits and increases in value. The slider value can be displayed directly with the event input and the output elements.

Key points

Use <input type="range"> with min, max, step, and clear value
Listen to the event input so that the value is updated when the slider is moved
Display values on output or span elements associated with sliders
Give a visible label and make sure the slider is operated with the keyboard.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.