0

反応アプリケーションでion-rangesliderを使用しようとしています。しかし、WebページのUIには表示されません。このように私のcomponentDidMountメソッドを初期化しています

componentDidMount = () => {

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

しかし、ウェブページでは、このように表示されていますここに画像の説明を入力

このようにする必要がありますここに画像の説明を入力

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
        });

しかし、それは私に言うエラーを与えました

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

create を使用して noUiSlider を初期化したところ、そこで動作しました。しかし、ionrangeslider では create が機能しませんでした。

この完全な問題を解決するにはどうすればよいですか?

4

2 に答える 2

0

コンポーネントに以下のように css をインポートする必要があります。

import 'ion-rangeslider/css/ion.rangeSlider.min.css'
于 2020-05-28T06:45:19.677 に答える