CodeBlanks Logo Icon CodeBlanks
Login Register

Range and color

HTML course · Advanced · Lesson 21/56

Use <input type="range"> and <input type="color">.

The range slider

<input type="range"> shows a slider. The user picks a value inside a range. You set the bounds with min, max and step.

Example: <input type="range" min="0" max="100" value="50">. This is a volume slider between 0 and 100; the starting value is 50.

value sets the slider's initial position. As the user drags, the value changes.

The colour picker

<input type="color"> shows a colour picker. When the user clicks, the operating system's colour panel opens.

The value is always a six-digit hex code: #rrggbb. Example: <input type="color" value="#3366cc">. The default value is #000000 (black).

The picker is handy when you do not want the user to type a colour in a specific format; the browser always produces a valid hex value.

Exercise Write a volume slider and theme colour

Add a <form> inside body. Put two labelled inputs inside: a volume slider <input type="range" id="volume" min="0" max="100"> and a theme colour <input type="color" id="theme">. Match each with a <label for="...">.

Show example solution 
<body>
  <form>
    <label for="volume">Volume</label>
    <input type="range" id="volume" name="volume" min="0" max="100" value="50">
    <label for="theme">Theme colour</label>
    <input type="color" id="theme" name="theme" value="#3366cc">
  </form>
</body>

Test yourself

  1. Which input type is used for a volume slider?

    • number
    • text
    • color
    • range
    Show answer

    range — Correct. type="range" makes a slider.

  2. Complete the upper bound of the range input

    <input type="range" min="0" max="____" value="50">
    Show answer 
    <input type="range" min="0" max="100" value="50">

  3. Match each input type to its use

    range
    Volume slider
    color
    Theme colour
    email
    Email address
    number
    Age

All lessons in Advanced

1 Advanced media

  1. Lazy loading
  2. Decoding async
  3. Srcset and sizes
  4. Width/height and CLS
  5. Preload and prefetch
  6. Summary - Performance gallery

2 Picture and responsive images

  1. Picture and source
  2. Media attribute
  3. Type attribute
  4. Aspect ratio
  5. Background vs img
  6. Summary - Responsive hero

3 Project: Video player

  1. Project: Accessible video player
  2. Video skeleton
  3. Track and captions
  4. Poster and preview
  5. Project final - Video player

4 Complex forms

  1. Form autocomplete
  2. Hidden input
  3. File upload
  4. Range and color
  5. Output and form events
  6. Summary - Settings panel

5 Metadata and SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical and hreflang
  5. Title and slug strategy
  6. Summary - SEO package

6 Project: Schema.org markup

  1. Project: Schema.org markup
  2. Itemtype and itemid
  3. Itemprop
  4. Nested itemtype
  5. Project final - Structured data

7 Web components HTML

  1. Template element
  2. Slot element
  3. Custom element names
  4. Shadow DOM skeleton
  5. Declarative shadow DOM
  6. Summary - Card template

8 Templates and partials

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript and progressive
  6. Summary - Component skeleton

9 Project: Dashboard widget

  1. Project: Dashboard widget
  2. Widget skeleton
  3. Visual data structure
  4. Template and slot
  5. Project final - Widget

10 Advanced final

  1. Challenge - Responsive image
  2. Challenge - Accessible video
  3. Challenge - Complex form
  4. Challenge - SEO and structured data
  5. Challenge - Advanced capstone