Learn how to design and implement a stylish curved range slider using HTML and CSS. Enhance user experience and visual appeal on your website.
Table of Contents
Curved range sliders are interactive user interface elements that allow users to select a value within a specified range. Unlike traditional linear sliders, curved range sliders offer a visually appealing and intuitive way to capture user input. They provide a seamless and engaging interface for selecting values, making them popular in modern web design.
Incorporating curved range sliders can significantly enhance the user experience when designing a web page or application. These sliders serve a functional purpose and add an aesthetic touch to the overall design.
Curved range sliders find application in various scenarios, such as:
- Price Range Selection: Online marketplaces often use curved range sliders to allow users to select a price range for their search. The curved shape visually represents the range and makes it easier for users to understand and adjust their selection.
- Data Filtering: In data visualization applications, curved range sliders can be used to filter data based on a specific range of values. Users can smoothly slide the handles along the curve to refine their data queries, providing a more engaging and interactive experience.
- Audio/Video Controls: Curved range sliders are commonly used in media players for volume control and seeking through media. The curvature of the slider represents the gradual increase or decrease in volume or progress, enhancing the usability of the player.
By leveraging HTML and CSS, you can create custom curved range sliders that align with your website's visual identity and design principles. This tutorial will guide you through the process of designing and implementing a curved range slider using these technologies. Whether you're a web designer looking to enhance user experience or a developer aiming to add interactivity to your application, this tutorial will equip you with the necessary knowledge and skills to create impressive curved range sliders. Let's dive in!
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our range silder.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's an explanation of the code:
1. <!DOCTYPE html>: This is the document type declaration, specifying that the document is an HTML5 document.
2. <html lang="en">: This is the opening tag of the HTML document, and it specifies that the language of the document is English.
3. <head>: This is the opening tag of the head section of the HTML document. The head section contains metadata and information about the document.
4 <title>Curved Range Slider</title>: This tag sets the title of the web page, which is displayed in the browser's title bar or tab.
5. <meta charset="UTF-8" />: This meta tag specifies the character encoding for the document, in this case, UTF-8, which supports a wide range of characters.
6. <meta name="viewport" content="width=device-width" />: This meta tag sets the viewport width to match the device's screen width, ensuring proper rendering on different devices.
7. <link rel="stylesheet" href="styles.css" />: This link tag is used to include an external CSS file named "styles.css" to style the HTML elements on the page.
8. </head>: This is the closing tag for the head section.
9. <body>: This is the opening tag of the body section of the HTML document. The body contains the visible content of the web page.
10 .<div class="content">: This div element with the class "content" defines a container for the page content.
11. <div class="equalizer">: This div element with the class "equalizer" represents a container for the curved range slider.
12. <input type="range" id="eqz" value="0" autocomplete="off" max="100" onclick="document.body.style.setProperty('--eqz', this.value);" oninput="document.body.style.setProperty('--eqz', this.value);">: This input element creates a range slider. It has various attributes such as type, id, value, autocomplete, and max. The onclick and oninput attributes are used to update a CSS custom property called "--eqz" with the value of the range slider as it is changed.
13. <div class="number"></div>: This div element with the class "number" is an empty container that can be used to display the value of the range slider.
14. </div>: This is the closing tag for the "equalizer" div.
15. </div>: This is the closing tag for the "content" div.
16. </body>: This is the closing tag for the body section.
17. </html>: This is the closing tag for the HTML document.
This is the basic structure of our range silder using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the range slider is in place, the next step is to add styling to the range slider using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our curved range slider.
Here's a breakdown of the code:
1. The @import rule is used to import a font from Google Fonts, specifically the "Gochi Hand" font, which will be used for the text on the page.
2. The :root selector sets CSS custom properties or variables. It defines three variables: --sz (used for sizing), --bg-trick (background color), and --eqz (equalizer animation).
3. The *, *:before, and *:after selectors apply the following styles to all elements, their before and after pseudo-elements:
- box-sizing: border-box ensures that the width and height properties include padding and border sizes.
- transition: all 0s ease 0s sets the transition property to have no duration or delay, resulting in no transitions.
- font-family: 'Gochi Hand', Arial, serif sets the font family for the elements, prioritizing "Gochi Hand" font and falling back to Arial and serif fonts.
4. The body selector styles the page body with the following properties:
- margin: 0 and padding: 0 remove any default margin and padding.
- width: 100vw and height: 100vh set the width and height of the body to 100% of the viewport width and height, respectively.
- overflow: hidden hides any content that overflows the body element.
- display: flex, align-items: center, and justify-content: center center the content vertically and horizontally.
- background: linear-gradient(135deg, #3a3d44, #3b3e45, #383b42) applies a linear gradient background to the body, creating a dark gradient effect.
5. The body:before and body:after selectors style two pseudo-elements before and after the body element, which create a background effect. They have the following properties:
- content: "" generates an empty content for the pseudo-elements.
- position: absolute positions the pseudo-elements absolutely within the body.
- width: 100% and height: 100% set the width and height of the pseudo-elements to match the body.
- background: repeating-conic-gradient(...) sets the background with multiple repeating conic gradients, creating a pattern.
- opacity: 0.75 sets the opacity of the pseudo-elements to 0.75.
- filter: blur(0.75px) applies a blur effect to the pseudo-elements.
- z-index: -1 positions the pseudo-elements behind the body content.
6. The .content class styles a container element with the following properties:
- position: relative positions the element relatively to its normal position.
- width: calc(var(--sz) * 50) and height: calc(var(--sz) * 20) set the width and height based on the value of the --sz variable.
- display: flex, align-items: center, and justify-content: center center the content vertically and horizontally within the container.
7. The .content:before selector styles a pseudo-element before the .content element, creating a decorative shape:
- content: "" generates an empty content for the pseudo-element.
- position: absolute positions the pseudo-element absolutely within the .content element.
- width: calc(var(--sz) * 50) and height: calc(var(--sz) * 50) set the width and height based on the --sz variable.
- border: var(--sz) solid #ffffff creates a border with the specified color and width.
- border-radius: 155% 75% sets the border radius for the pseudo-element.
- top: calc(var(--sz) * -13) and left: calc(var(--sz) * 3) position the pseudo-element.
- transform: rotate(8deg) applies a rotation transformation.
- transform-origin: 0 0 sets the transformation origin.
- clip-path: polygon(0 0, 100% 0, 100% 21%, 0 41%) creates a clip path shape for the pseudo-element.
- z-index: -5 positions the pseudo-element behind the content.
- filter: drop-shadow(5px 5px 2px #0008) applies a drop shadow effect to the pseudo-element.
8. The .equalizer class styles a container element for the equalizer animation with the following properties:
- height: 100% and width: 100% set the dimensions to match the parent container.
- display: flex, align-items: center, and justify-content: center center the content vertically and horizontally.
9. The .equalizer:before and .equalizer:after selectors style two pseudo-elements within the .equalizer container, creating circular shapes:
- content: "" generates an empty content for the pseudo-elements.
- background: radial-gradient(...) sets a radial gradient background for the pseudo-elements.
- width: calc(var(--sz) * 7) and height: calc(var(--sz) * 7) set the dimensions based on the --sz variable.
- border-radius: 100% creates a circular shape for the pseudo-elements.
- left and top properties position the pseudo-elements.
- z-index: -5 positions the pseudo-elements behind the content.
- filter: drop-shadow(5px 5px 2px #0008) applies a drop shadow effect to the pseudo-elements.
9. The input[type='range'] selector styles the range input element:
- width: 100% and height: calc(var(--sz) * 2) set the dimensions of the input.
- position: absolute positions the input absolutely within its container.
- background: var(--bg-trick) sets the background color based on the --bg-trick variable.
- --bg-thumb and --bs-thumb define the background and box shadow styles for the input's thumb (slider handle).
- transform: rotate(calc(var(--eqz) * 0.9deg)) applies a rotation transformation to the input.
- transform-origin: 100% 50% sets the transformation origin.
- filter: hue-rotate(calc(var(--eqz) * -2.25deg)) applies a hue rotation filter to the input.
10. The input[type='range']:focus, input[type=range]:focus::-webkit-slider-runnable-track selectors define styles for the range input when it is in focus.
11. The various input[type='range'] selectors define styles for the range input and its track and thumb in different browsers (WebKit and Mozilla).
12. The .number class styles a number element with the following properties:
- position: absolute positions the element absolutely within its container.
- bottom: calc(var(--sz) * 14) and left: calc(var(--sz) * 20) position the element.
- color: #fff sets the text color to white.
- font-size: calc(var(--sz) * 8) sets the font size based on the --sz variable.
- z-index: 333 positions the element above other content.
- font-family: 'Alarm Clock', Arial, serif sets the font family for the element.
- transform: rotate(-3deg) applies a rotation transformation to the element.
- text-shadow adds a shadow effect to the text.
13. The .number:before selector styles a pseudo-element before the .number element, adding a counter with a generated content and styling.
This will give our curved range slider an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
:root {
--sz: 1vmin;
--bg-trick: #fff0;
--eqz: 0;
}
*, *:before, *:after {
box-sizing: border-box;
transition: all 0s ease 0s;
font-family: 'Gochi Hand', Arial, serif;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #3a3d44, #3b3e45, #383b42);
}
body:before, body:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background:
repeating-conic-gradient(#0002 0.000095%, #fff0 .0005%, #fff0 .005%, #fff0 .0005%),
repeating-conic-gradient(#0002 0.00001%, #fff0 .00009%, #fff0 .00075%, #fff0 .000025%);
opacity: 0.75;
filter: blur(0.75px);
z-index: -1;
}
.content {
position: relative;
width: calc(var(--sz) * 50);
height: calc(var(--sz) * 20);
display: flex;
align-items: center;
justify-content: center;
}
.content:before {
content: "";
position: absolute;
width: calc(var(--sz) * 50);
height: calc(var(--sz) * 50);
border: var(--sz) solid #ffffff;
border-radius: 155% 75%;
top: calc(var(--sz) * -13);
left: calc(var(--sz) * 3);
transform: rotate(8deg);
transform-origin: 0 0;
clip-path: polygon(0 0, 100% 0, 100% 21%, 0 41%);
z-index: -5;
filter: drop-shadow(5px 5px 2px #0008);
}
.equalizer {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.equalizer:before,
.equalizer:after {
content: "";
background: radial-gradient(#fff0 calc(var(--sz) * 2.6), #fff calc(calc(var(--sz) * 2.6) + 1px));
width: calc(var(--sz) * 7);
position: absolute;
height: calc(var(--sz) * 7);
border-radius: 100%;
left: calc(var(--sz) * -0.95);
top: calc(var(--sz) * 6.3);
z-index: -5;
filter: drop-shadow(5px 5px 2px #0008);
}
.equalizer:after {
left: calc(var(--sz) * 46.715);
top: calc(var(--sz) * 4.05);
}
input[type='range'] {
width: 100%;
height: calc(var(--sz) * 2);
position: absolute;
background: var(--bg-trick);
--bg-thumb: radial-gradient(#ff3a3a calc(var(--sz) * 2.35), #fff0 0 100%);
--bs-thumb: 0 0 0px calc(var(--sz) * 0.5) #3a3d44 inset;
transform: rotate(calc(var(--eqz) * 0.9deg));
transform-origin: 100% 50%;
filter: hue-rotate(calc(var(--eqz) * -2.25deg));
}
input[type='range']:focus,
input[type=range]:focus::-webkit-slider-runnable-track {
outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
width: calc(var(--sz) * 5);
height: calc(var(--sz) * 5);
border-radius: calc(var(--sz) * 5);
cursor: pointer;
margin-top: calc(var(--sz) * -1);
background: var(--bg-thumb);
box-shadow: var(--bs-thumb);
}
input[type=range]::-moz-range-thumb {
width: calc(var(--sz) * 5);
height: calc(var(--sz) * 5);
border-radius: calc(var(--sz) * 5);
cursor: pointer;
margin-top: calc(var(--sz) * -1);
background: var(--bg-thumb);
box-shadow: var(--bs-thumb);
}
input[type=range]::-webkit-slider-runnable-track {
background: #fff0;
height: calc(var(--sz) * 3.5);
}
input[type=range]::-moz-range-track {
background: #fff0;
height: calc(var(--sz) * 3.5);
}
.number {
position: absolute;
bottom: calc(var(--sz) * 14);
left: calc(var(--sz) * 20);
color: #fff;
font-size: calc(var(--sz) * 8);
z-index: 333;
font-family: 'Alarm Clock', Arial, serif;
transform: rotate(-3deg);
text-shadow: calc(var(--sz) * 0.25) calc(var(--sz) * 0.25) calc(var(--sz) * 0.25) #000;
}
.number:before {
counter-reset: variable var(--eqz);
content: counter(variable);
position: absolute;
text-align: center;
width: calc(var(--sz) * 15);
overflow: hidden;
} Final Output:
Conclusion:
In conclusion, curved range sliders offer a powerful tool for enhancing user interaction and improving the overall user experience on websites and web applications. By incorporating these visually appealing and intuitive sliders into your design, you can provide users with a seamless and engaging way to select values within a specified range.
Throughout this tutorial, we explored the process of creating a curved range slider using HTML and CSS. We learned about the fundamentals of HTML and CSS, understanding how these technologies work together to structure and style web elements. We then delved into the step-by-step implementation of a customized curved range slider, covering the HTML structure, and CSS styling.
By following the outlined steps, you now have the knowledge and skills to create your own curved range sliders. Feel free to experiment with different styles, sizes, and functionalities to match your specific design requirements. Customizing the appearance and behavior of the slider allows you to align it with your website's aesthetics and provide a unique user experience.
Remember to consider cross-browser compatibility and responsive design when implementing curved range sliders. Testing your sliders on various devices and browsers will ensure a consistent experience for all users.
Curved range sliders are versatile elements that can be applied in various contexts, such as price range selection, data filtering, audio/video controls, and more. By incorporating them intelligently into your web projects, you can elevate the usability and visual appeal of your websites and applications.
Now it's time for you to apply your newfound knowledge and unleash your creativity. Start integrating curved range sliders into your designs, and explore the endless possibilities they offer for enhancing user interaction and engagement.
Happy designing and developing!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
