Bootstrap5 Range

--

Home

HTML

JavaScript

CSS

Vue

React

Python3

Java

C

C++

C#

AI

Go

SQL

Linux

VS Code

Bootstrap

Git

Local Bookmarks

Home

HTML

CSS

JS

Local Bookmarks

Search

Vue3 Tutorial

Vue2 Tutorial

Bootstrap3

Bootstrap4

Bootstrap5

Machine Learning

PyTorch

TensorFlow

Sklearn

NLP

AI Agent

Ollama

Coding Plan

Bootstrap5 Tutorial

Bootstrap5 Tutorial Bootstrap5 Installation Bootstrap5 Container Bootstrap5 Grid System Bootstrap5 Typography Bootstrap5 Colors Bootstrap5 Tables Bootstrap5 Images Bootstrap5 Jumbotron Bootstrap5 Alerts Bootstrap5 Buttons Bootstrap5 Button Groups Bootstrap5 Badges Bootstrap5 Progress Bars Bootstrap5 Spinners Bootstrap5 Pagination Bootstrap5 List Groups Bootstrap5 Cards Bootstrap5 Dropdowns Bootstrap5 Collapse Bootstrap5 Navs Bootstrap5 Navbar Bootstrap5 Carousel Bootstrap5 Modal Bootstrap5 Tooltip Bootstrap5 Popover Bootstrap5 Toasts Bootstrap5 Scrollspy Bootstrap5 Offcanvas Bootstrap5 Utilities Bootstrap5 Flex Layout

Explore Further

Scripting

Programming

Web Services

Development Tools

Web Service

Scripting Languages

Web Design and Development

Programming Languages

Software

Computer Science

To create a range slider, add type="range" to the input element and use the .form-range class:

Range:

<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange">

By default, the step is 1. You can set it using the step attribute:

<input type="range" class="form-range" step="10">

By default, the minimum value is 0 and the maximum value is 100. You can set them using the min or max attributes:

<input type="range" class="form-range" min="0" max="4">