import React, { useEffect, useState } from "react"; import { Card, Col, Row, Container, Form, } from "react-bootstrap"; //import Components import BreadCrumb from "../../../Components/Common/BreadCrumb"; import Nouislider from "nouislider-react"; import 'nouislider/distribute/nouislider.css'; import { Head } from "@inertiajs/react"; import Layout from "../../../Layouts"; const FormRangeSlider = () => { const [mincost, setMincost] = useState(0); const [maxcost, setMaxcost] = useState(2000); //slider function const onUpDate = (value: any) => { setMincost(value[0]); setMaxcost(value[1]); }; useEffect(() => { onUpDate([mincost, maxcost]); }, [mincost, maxcost]); useEffect(() => { let slider = document.getElementById("product-price-range"); slider?.setAttribute("data-slider-color", "success"); }, []) const pipsOptions = { mode: 'positions', values: [0, 25, 50, 75, 100], density: 4, format: { to: (value: any) => parseInt(value), from: (value: any) => parseInt(value), } }; return (

Bootstrap Range
Default Range

Use form-range class to create a default range.

Disabled

Use disabled attribute on an input to give it a grayed out appearance and remove pointer events.

Min and Max

Use min and max attribute with specified range input respectively.

Steps

By default, range inputs "snap" to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5" attribute.

 {/* nouislider */}

Nouislider

noUiSlider is a lightweight JavaScript range slider

Basic Example
Multi elements range handle
Non linear slider
Merging overlapping tooltips
Only showing tooltips when sliding handle
Moving the slider by clicking pips
Colored Connect Elements
Creating a toggle
Soft limits
{/* color scheme */}

Color Scheme
Primary

Use data-rangeslider data-slider-color="primary" attribute to set primary color scheme.

Secondary

Use data-rangeslider data-slider-color="secondary" attribute to set secondary color scheme.

Success

Use data-rangeslider data-slider-color="success" attribute to set success color scheme.
Info

Use data-rangeslider data-slider-color="info" attribute to set info color scheme.

Warning

Use data-slider-color="warning" attribute to set warning color scheme.

Danger

Use data-rangeslider data-slider-color="danger" attribute to set danger color scheme.
Dark

Use data-rangeslider data-slider-color="dark" attribute to set dark color scheme.
); }; FormRangeSlider.layout = (page: any) => export default FormRangeSlider;