Range slider

import React, { useState } from 'react';
import { Form } from 'react-bootstrap';
import Slider from 'rc-slider';
import { handleRender } from '../../../components/RangeSliderTooltip/TooltipSlider.tsx';
import '../../../Assets/scss/rc-slider.scss';

const RangeSliderExample = () => {
    const [sliderInitialValue, setSliderInitialValue] = useState(50);

  return (
    <Form>
        <Form.Group className="mb-5">
            <Form.Label className="mb-3">Default slider</Form.Label>
            <Slider
                min={0}
                max={100}
                defaultValue={sliderInitialValue}
                marks={{ 0: 0, 100: 100 }}
                onChange={(value) => setSliderInitialValue(value)}
                handleRender={handleRender}
            />
        </Form.Group>
        <Form.Group className="mb-5">
            <Form.Label className="mb-3">Set min value, max value and start point</Form.Label>
            <Slider
                range
                min={1000}
                max={5000}
                defaultValue={[2000, 4000]}
                marks={{ 1000: 1000, 5000: 5000 }}
                handleRender={handleRender}
            />
        </Form.Group>
        <Form.Group className="mb-5">
            <Form.Label className="mb-3">Set custom step and snap grid to step and use <code>className="rc-slider-grid"</code> class for snap grid.</Form.Label>
            <Slider
                range
                min={0}
                max={10000}
                step={500}
                dots
                marks={{ 0: 0, 10000: 10000 }}
                defaultValue={[0, 10000]}
                handleRender={handleRender}
                className='rc-slider-grid'
            />
        </Form.Group>
        <Form.Group className="mb-5">
            <Form.Label className="mb-3">For smaller size range, use <code>className="rcs-sm"</code> class.</Form.Label>
            <Slider
                min={0}
                max={100}
                defaultValue={sliderInitialValue}
                marks={{ 0: 0, 100: 100 }}
                onChange={(value) => setSliderInitialValue(value)}
                handleRender={handleRender}
                className='rcs-sm'
            />
        </Form.Group>
    </Form>
  );
}

export default RangeSliderExample;

import React, { useState } from 'react';
import { Col, Row } from 'react-bootstrap';
import DisplayCard from '../../../components/DisplayCard/DisplayCard';
import Slider from 'rc-slider';
import { handleRender } from '../../Components/DataEntry/RangeSlider/TooltipSlider.tsx';
import '../../../Assets/scss/rc-slider.scss';

import { Button } from 'react-bootstrap';

const RangeSliderColors = () => {
    const [sliderInitialValue, setSliderInitialValue] = useState(50);

  return (
    <Row>
        <Col md={6} className="my-3">
            <Slider
                min={0}
                max={100}
                defaultValue={sliderInitialValue}
                marks={{ 0: 0, 100: 100 }}
                onChange={(value) => setSliderInitialValue(value)}
                handleRender={handleRender}
                className='rcs-orange'
            />
        </Col>
        <Col md={6} className="my-3">
            <Slider
                min={0}
                max={100}
                defaultValue={sliderInitialValue}
                marks={{ 0: 0, 100: 100 }}
                onChange={(value) => setSliderInitialValue(value)}
                handleRender={handleRender}
                className='rcs-secondary'
            />
        </Col>
        <Col md={6} className="my-3">
            <Slider
                min={0}
                max={100}
                defaultValue={sliderInitialValue}
                marks={{ 0: 0, 100: 100 }}
                onChange={(value) => setSliderInitialValue(value)}
                handleRender={handleRender}
                className='rcs-info'
            />
        </Col>
        <Col md={6} className="my-3">
            <Slider
                min={0}
                max={100}
                defaultValue={sliderInitialValue}
                marks={{ 0: 0, 100: 100 }}
                onChange={(value) => setSliderInitialValue(value)}
                handleRender={handleRender}
                className='rcs-success'
            />
        </Col>
    </Row>
  );
}

export default RangeSliderColors;