Range Slider with Output Display

Enhance user interaction on your website with a range slider featuring a dynamic output display. Learn how to implement a slider that provides real-time feedback on selected values using HTML and CSS.

Enhance your website's interactive elements with a stylish range slider that includes an output display. This guide will walk you through creating a customizable range slider using HTML and CSS. Follow these instructions to copy the provided code snippet, link the required CSS files, and personalize the slider to match your website's design and provide a seamless user experience.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the range slider with an output display. Select the code, copy it, and paste it into your respective HTML and CSS files.

Step 2: Link CSS Files

  • Ensure the CSS file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles: 
    <link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

  • Personalize the range slider with an output display to match your website's branding and functionality. Adjust the CSS styles to modify the slider's appearance, colors, and interactions. Experiment with different styles, sizes, and output display formats to create a unique and engaging interactive element.

By following these steps, you can implement and customize a range slider with an output display on your website using HTML and CSS. Tailor the slider to your specific needs and enhance your site's interactivity with this modern and stylish component.

Code Explanation

HTML Code

Range Input (<input type="range">)
<input
  type="range"
  id="rangeInput"
  name="rangeInput"
  min="0"
  max="20"
  value="0"
  oninput="amount.value=rangeInput.value"
/>
  • type="range": Specifies that this input element is a slider control.
  • id="rangeInput": Specifies the id attribute for the range input, which can be used to target this element with JavaScript or CSS.
  • name="rangeInput": Specifies the name attribute for the range input, which is used when submitting form data.
  • min="0": Specifies the minimum value of the slider.
  • max="20": Specifies the maximum value of the slider.
  • value="0": Specifies the initial value of the slider.
  • oninput="amount.value=rangeInput.value": Specifies an inline event handler that updates the value of the <output> element (amount) with the current value of the range input (rangeInput) whenever the slider value changes (oninput event).
Output Element (<output>)
<output id="amount" name="amount" for="rangeInput">0</output>
  • id="amount": Specifies the id attribute for the output element, which can be used to target this element with JavaScript or CSS.
  • name="amount": Specifies the name attribute for the output element, which is used when submitting form data.
  • for="rangeInput": Specifies the id of the associated range input element (rangeInput). This links the output element to the range input, meaning it displays the current value of the range input.
  • 0: Specifies the initial text content of the output element, which will be overridden by the value of the range input due to the for attribute association and the JavaScript event handler.

CSS Code

Universal Selector
* {
  box-sizing: border-box;
}
  • *: Targets all elements in the document.
  • box-sizing: border-box;: Ensures that padding and border sizes are included in the element's total width and height. This is a commonly used CSS reset technique to ensure consistent sizing behavior across different elements.
HTML and Body Styling
html,
body {
  height: 100%;
}
  • html, body: Targets the <html> and <body> elements of the document.
  • height: 100%;: Sets the height of both <html> and <body> elements to 100% of the viewport height (vh). This ensures that the entire viewport height is covered by these elements.
Body Styling
body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #f9f9f9;
  font-family: "Euclid Circular A";
}
  • margin: 0;: Removes any default margin from the <body> element.
  • display: grid;: Changes the layout of the body to a grid layout.
  • place-items: center;: Centers the content both horizontally and vertically within the grid.
  • background: #1a1a1a;: Sets the background color of the <body> element to a dark grayish color (#1a1a1a).
  • color: #f9f9f9;: Sets the text color inside the <body> element to a light gray (#f9f9f9).
  • font-family: "Euclid Circular A";: Sets the font family for all text inside the <body> to "Euclid Circular A". This specifies a custom font for the document.