React Range Slider - A simple HTML5 input form control

Overview

The React Range Slider is an HTML5 input control that is used to select a value or range of values. Select a relative quantity value by moving a thumb along a bar. The control has major/minor ticks, thumb, and tooltip that can be fully customized. Also, the control can be aligned horizontally or vertically.

Touch-friendly and responsive

The Range Slider control recognizes touch gestures, allowing the user to swipe left or right to change the value of the slider. The responsive, touch-friendly design provides the best user experience on all phone, tablet, and desktop form factors.

• Check slider examples in different mobile devices

Tooltips

The tooltip displays slide value information when the mouse pointer moves the thumb over the bar. The same can be done on mobile devices by touch events.

• HTML Form slider tooltip example

Built-in and customizable themes

Several built-in, Sass-based themes are available: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap, Material, and high contrast. Users can customize these themes by either overriding the existing Sass styles or creating custom themes using the Theme Studio application.

• Theme studio application

Other supported frameworks

The Slider component is also available in Blazor, Vue, Angular and JavaScript frameworks. Check out the different Slider platforms from the links below,

• Blazor Range Slider
• Vue Slider
• Angular Slider
• JavaScript Range Slider

React Slider code example

Easily get started with the React Slider using a few simple lines of TSX code example as demonstrated below. Also explore our React Slider example that shows you how to render and configure a Slider in React.

import * as React from 'react';
import { SliderComponent } from '@syncfusion/ej2-react-inputs';

function App() {
  return (
    <div id="container">
      <div className="wrap">
        <SliderComponent id="slider" value={30} />
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);