Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
Open In App
Next Article:
How to Change Background Color in HTML without CSS ?
Next article icon

How to Change Background Color with Color Range Slider in HTML?

Last Updated : 07 May, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

To Change the Background Color using an HTML rounded slider that dynamically changes the webpage's background as the slider thumb is moved along its track, giving a visual indication of the selected color. The approach provides a convenient method for customizing the visual appearance of the webpage in real-time.

Approach

  • The HTML document defines a slider that changes the webpage's background color when the slider thumb is moved.
  • The slider input element is defined with the ID "myRange". It has a minimum value of 0, a maximum value of 100, and an initial value of 50. After getting the input, the function "changeBackgroundColor()" is called.
  • The JavaScript function retrieves the value of a range slider with the id "myRange".
  • It then constructs an HSL color string based on the slider's value, with full saturation and 50% lightness.
  • Finally, it sets the background color of the entire web page's body to the generated color string. This function dynamically changes the webpage's background color as the user adjusts the slider.

Example: Implementation of changing background color using HTML rounded slider.

HTML 
<!DOCTYPE html> <html>  <head>     <meta name="viewport"            content="width=device-width,                     initial-scale=1">     <title>Custom Rounded Range Slider</title>      <style>         body {             background-color: yellow;         }          h1 {             text-align: center;         }          .slidecontainer {             width: 100%;         }          .custom-slider-range:hover {             opacity: 1.2;         }          .custom-slider-range {             -webkit-appearance: none;             appearance: none;             width: 100%;             height: 25px;             background: linear-gradient(to right,               red, yellow, green);             outline: none;             opacity: 0.8;             transition: opacity 0.4s;             border-radius: 15px;         }          .custom-slider-range::-moz-range-thumb {             width: 25px;             height: 25px;             background: #fff;             border: 2px solid #000;             border-radius: 50%;             cursor: pointer;         }     </style> </head>  <body>      <h1>Change Background Color        using HTML Rounded Slider</h1>      <div class="slidecontainer">         <input type="range" min="1"                 max="100"                 value="50"                 class="custom-slider-range"                id="myRange"                 oninput="changeBackgroundColor()">     </div>      <script>         function changeBackgroundColor() {             let slider = document.getElementById("myRange");             let value = slider.value;             let color = 'hsl(' + value + ', 100%, 50%)';             document.body.style.background = color;         }     </script>  </body>  </html>

Output:

slider
Output

Next Article
How to Change Background Color in HTML without CSS ?

V
vishal_shevale
Improve
Article Tags :
  • Web Technologies
  • HTML

Similar Reads

  • How to Change Background Color in HTML without CSS ?
    In HTML, you can change the background color of an element using the bgcolor attribute. However, it's important to note that the bgcolor attribute is deprecated in HTML5 and should be avoided in favor of using CSS for styling. This article will cover various methods to change the background color of
    2 min read
  • How to change Background Color in HTML ?
    The background color in HTML refers to the color displayed behind the content of a webpage. To change it, CSS (Cascading Style Sheets) is used, with various approaches available. In CSS, we define the background-color property within a CSS rule, specifying a color value such as a name, hexadecimal c
    3 min read
  • How to Change Selected Text Background Color in CSS?
    Sometimes, we need to change the color and background color of the selected text. The ::selection pseudo-element is used to change the background color of the selected text in CSS. This pseudo-element allows you to style the portion of text that has been selected by the user. Using ::selection Pseud
    2 min read
  • How to Change the Color of Range Slider in CSS?
    The color of a range slider refers to the visual appearance of its track and thumb. You can change the range slider's color in CSS using properties like accent-color for quick customization or pseudo-elements like ::-webkit-slider-runnable-track and ::-moz-range-track for detailed styling. Table of
    2 min read
  • How to Change the Background Color of Table using CSS?
    Changing the background color of a table using CSS can help improve the visual appearance of a website or web application. we will learn how to change the background color of the table using CSS with different approaches. These are the following approaches: Table of Content Using Inline CSSUsing Int
    2 min read
  • How to choose background color through color picker?
    In this project, we are going to change the background color with the help of the Color Picker. Glimpse of the Project: Approach: Create an HTML file in which we are going to add the text and a color picker which helps to change the background color of our web-page.Create a CSS style to give some an
    3 min read
  • How to Change Brightness using HTML Range Slider ?
    HTML Range Slider is the value adjusting component that can also be used to dynamically adjust and change the brightness of various elements like Image. we will explore two different approaches to Changing brightness using an HTML range slider. These are the following approaches: Table of Content Us
    3 min read
  • How to Change Background Color in Google Docs : Easy Steps to Follow
    How to Change Background Color on Google Docs - Quick Steps Open Google Docs > Choose a DocumentGo to File > Select Page SetupClick on Page Color > Choose ColorClick "Ok"Changing the background color in Google Docs is a simple yet effective way to personalize your documents and make them vi
    7 min read
  • How to change text color depending on background color using JavaScript?
    The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript. Approach: First, select the random Background color(by selecting random RGB values) or a specific one.Use the YIQ
    3 min read
  • How to Change the Button Color in HTML ?
    Styling of elements enhances the visual appearance and improves the overall user interface. We can change the button color in HTML using different approaches as listed below. Table of Content Using Inline StylingUsing Internal StylingChange the Button Color Using Inline StylingIn this approach, we a
    3 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences