ion-rangeslider not getting displayed

Question

I am trying to use ion-rangeslider in my react application. But it is not showing up with ui on webpage. I am initializing it my componentDidMount method like this

componentDidMount = () => {

    $("#ionSlider-newTag").ionRangeSlider({
        min: 0,
        max: 5000,
        type: 'double',
        postfix: 's',
        maxPostfix: "+",
        prettify: false,
        hasGrid: true,
        from: 1600,
        to: 2950
    });

But on webpage it is getting showed like this

should be like this

I also tried to initialize without using jquery

var slider = document.getElementById('ionSlider-newTag');

        ionRangeSlider.create(slider,{
            min: 0,
            max: 5000,
            type: 'double',
            postfix: 's',
            maxPostfix: "+",
            prettify: false,
            hasGrid: true,
            from: 1600,
            to: 2950
        });

But it gave me error saying

Uncaught TypeError: _ionRangeslider2.default.create is not a function

I used create to initialize noUiSlider, and it worked there. But create didn't work with ionrangeslider.

How can I slove this complete problem?

Looks like you missing the CSS in the first try – philipheinser Jun 03 '17 at 10:07 — philipheinser, Jun 03 '17 at 10:07
I already downloaded the npm package for ionslider – EdG Jun 03 '17 at 12:25 — EdG, Jun 03 '17 at 12:25

score 1 · Answer 1 · answered Apr 16 '21 at 13:25

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>

original answer posted here: https://stackoverflow.com/a/67124191/9208644

score 0 · Answer 2 · edited May 28 '20 at 08:18

0

Need to import css as a below in your component:

import 'ion-rangeslider/css/ion.rangeSlider.min.css'

edited May 28 '20 at 08:18

jalazbe

1,801
3
19
40

answered May 28 '20 at 06:45

Vijay Shelke

1

ion-rangeslider not getting displayed

2 Answers2

Linked