ion-rangeslider没有显示 [英] ion-rangeslider not getting displayed

问题描述

我正在尝试在我的React应用程序中使用ion-rangeslider.但是它并没有与ui一起显示在网页上.我正在像这样用我的componentDidMount方法初始化它

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 =()=> {

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

应该是这样的

我也尝试不使用jquery进行初始化

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

我使用create来初始化noUiSlider，它在那里工作.但是create不适用于ionrangeslider.

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

我该如何解决这个完整的问题?

How can I slove this complete problem?

推荐答案

需要将css如下导入到您的组件中:

Need to import css as a below in your component:

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

这篇关于ion-rangeslider没有显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！