Slider

slider is an interactive component that lets the user swiftly slide through possible values spread on the desired range.

Its basic implementation is quite simple and does not require big blocks of code.

Examples of React Bootstrap slider use:

• Video progress bar
• Volume increase/decrease
• Enthusiasm-o-meter

Examples

Slider example.

import React from "react";
import { CDBSlider, CDBContainer } from "cdbreact";
const Slider = () => {
  return (
    <CDBContainer>
     <CDBSlider value={value} setValue={setValue} style={{ width: "100%" }} />
    </CDBContainer>
  );
};
export default  Slider;

API

In this section you will find advanced information about the Slider component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Slider Import Statement

You need to import the Contrast Slider component first before using it.

import { CDBSlider } from "cdbreact";

API Reference: Contrast Slider Properties

The table below shows the configuration options of the CDBSlider component.