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

score 1 · Answer 1 · answered Apr 16 '21 at 05:51

1

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

answered Apr 16 '21 at 05:51

Gautam Prajapati

56
3

1

you are using 'react-ion-slider' though and i am suggesting another one, please give a try to 'ion-rangeslider' library and let me know. – Gautam Prajapati Apr 16 '21 at 06:02
I install this but not working for me. thanks – Dhaval Apr 16 '21 at 06:02

score 1 · Accepted Answer · answered Apr 16 '21 at 11:15

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>

IonRangeSlider not Display

2 Answers2

Linked