IonRangeSlider not Display

Question

I am trying to use react-ion-slider on my react website. But it is not showing up.

import IonRangeSlider from 'react-ion-slider';
import React, { Component, ReactNode } from 'react';


function Category() {
    return (
        <div className="category-page main_div">
            <IonRangeSlider type={'double'} min={0} max={150} from={0} to={150} step={1} />
        </div>
    );
}

export default Category;

Output:

But I want like this

Answer 1

correcting my own answer given above by adding script using useEffect lifecycle. here is example:

import React, { Component, ReactNode, useEffect } from 'react';
import ionRangeSlider from 'react-ion-slider'
import $ from 'jquery';

function Category() {
    useEffect(() => {
        const script = document.createElement('script');
        script.innerHTML="$('#demo_1').ionRangeSlider({type: 'double',grid: true,min: 0,max: 1000,from: 200,to: 800,prefix: '$'})"
        document.body.appendChild(script);
        return () => {
            document.body.removeChild(script);
        }
    }, [])
    return (
        <div className="category-page main_div">
         <input type="text" className="js-range-slider" id="demo_1" />
        </div>
    );
}
export default Category;

If still not working then add these js and css in your index.js file (located at root folder).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>

Answer 2

Instead of this try ion-rangeslider to achieve this functionality

npm i ion-rangeslider

for details go to https://www.npmjs.com/package/ion-rangeslider