Article Categories

Selected Reading

How to create custom range sliders with CSS and JavaScript?

CSS Web Development Front End Technology Javascript

A range slider is an HTML input element that accepts the type "range". It allows users to select a numeric value within a specified range by dragging a slider handle.

Syntax

input[type="range"] {
    -webkit-appearance: none;
    width: 300px;
    height: 20px;
    background: #ddd;
    border-radius: 5px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

Method 1: Using oninput Event

The oninput event fires immediately when the user changes the slider value, providing real-time updates ?

<!DOCTYPE html>
<html>
<head>
<style>
    .slider-container {
        margin: 20px;
        padding: 20px;
        font-family: Arial, sans-serif;
    }
    
    input[type="range"] {
        -webkit-appearance: none;
        width: 400px;
        height: 30px;
        background-color: #333;
        border-radius: 60px;
        margin: 10px 0;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 50px;
        height: 50px;
        border-radius: 40px;
        background-color: #007bff;
        cursor: pointer;
    }
    
    .value-display {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-top: 15px;
    }
</style>
</head>
<body>
    <div class="slider-container">
        <h2>Custom Range Slider with Real-time Updates</h2>
        <p>Drag the slider to see instant value changes:</p>
        <input type="range" min="1" max="100" value="50" oninput="updateValue()" id="slider">
        <div class="value-display" id="display">Value: 50</div>
    </div>
    
    <script>
        function updateValue() {
            const slider = document.getElementById('slider');
            const display = document.getElementById('display');
            display.innerHTML = "Value: " + slider.value;
        }
    </script>
</body>
</html>

A custom-styled range slider with a dark track and blue handle appears. Moving the slider instantly updates the displayed value below it.

Method 2: Using onclick Event with Button

This method updates the value only when a button is clicked, useful for confirming selections ?

<!DOCTYPE html>
<html>
<head>
<style>
    .slider-container {
        margin: 20px;
        padding: 20px;
        font-family: Arial, sans-serif;
    }
    
    input[type="range"] {
        -webkit-appearance: none;
        width: 400px;
        height: 30px;
        background-color: #ffeb3b;
        border-radius: 60px;
        margin: 10px 0;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 50px;
        height: 50px;
        border-radius: 40px;
        background-color: #f44336;
        cursor: pointer;
    }
    
    .control-button {
        width: 150px;
        height: 40px;
        background-color: #2196F3;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin: 10px;
        transition: opacity 0.3s;
    }
    
    .control-button:hover {
        opacity: 0.8;
    }
    
    .value-display {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin-top: 15px;
    }
</style>
</head>
<body>
    <div class="slider-container">
        <h2>Custom Range Slider with Button Control</h2>
        <p>Set the slider value and click the button:</p>
        <input type="range" min="1" max="100" value="25" id="buttonSlider">
        <br>
        <button class="control-button" onclick="calculateRange()">Get Range Value</button>
        <div class="value-display" id="result">Click button to see value</div>
    </div>
    
    <script>
        function calculateRange() {
            const slider = document.getElementById('buttonSlider');
            const result = document.getElementById('result');
            result.innerHTML = "Selected Value: " + slider.value;
        }
    </script>
</body>
</html>

A yellow-tracked slider with a red handle appears. The value is displayed only when the "Get Range Value" button is clicked, showing the current slider position.

Key CSS Properties for Range Customization

Property	Element	Description
`-webkit-appearance: none`	input[type="range"]	Removes default styling
`width, height`	input[type="range"]	Sets slider track dimensions
`background-color`	input[type="range"]	Colors the slider track
`border-radius`	Both elements	Creates rounded corners
`cursor: pointer`	::-webkit-slider-thumb	Shows pointer on hover

Conclusion

Custom range sliders combine CSS styling with JavaScript functionality to create interactive form controls. Use the oninput event for real-time updates or button clicks for confirmed selections, while CSS pseudo-elements provide complete visual customization.

Vivek Verma

Updated on: 2026-03-15T14:46:56+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next