-1

I import MultiRangeSlider in react which asks for a "ChangeResult" module which only works with tsx but all other files are in jsx. I would like to avoid modifying all my application. See line 27

import MultiRangeSlider, { ChangeResult }  from 'multi-range-slider-react'
import React, { useState } from 'react'

export default function Memory({ setFilters }) {
    const memoryDimension = ['4', '8', '16', '32', '64']
    const [minValue, setMinValue] = useState(0)
    const [maxValue, setMaxValue] = useState(0)
    const [minValue2, setMinValue2] = useState(0)
    const [maxValue2, setMaxValue2] = useState(0)
    const [minCaption, set_minCaption] = useState('')
    const [maxCaption, set_maxCaption] = useState('')

    return (
        <div className="filters">
            <div className="filter display-processeur">
                <h1>Mémoire</h1>
                <div className="display-processor-intel-amd">
                    <div className="display-filter-by-gamme-core">
                        <MultiRangeSlider
                            title="memory-dimension"
                            min={0}
                            max={5}
                            step={1}
                            minValue={1}
                            maxValue={4}
                            onInput={(e: ChangeResult) =>{
                                set_minCaption(memoryDimension[e.minValue])
                                set_maxCaption(memoryDimension[e.maxValue])
                                setMinValue(e.minValue)
                                setMaxValue(e.maxValue)
                            }}
                            onChange={(e) => {
                            setMinValue2(e.minValue)
                            setMaxValue2(e.maxValue)
                        }}
                            labels={memoryDimension}
                            ruler={false}
                            style={{
                                border: 'none',
                                boxShadow: 'none',
                                padding: '15px 10px',
                            }}
                            barLeftColor="red"
                            barInnerColor="blue"
                            barRightColor="green"
                            thumbLeftColor="lime"
                            thumbRightColor="lime"
                        />
                    </div>
                </div>
            </div>
        </div>
    )

}

I tried to create a function that overrides the ChangeResult module but failed.

David Arboin
  • 1
  • 1
  • If its a jsx file just remove `ChangeResult` from `onInput={(e: ChangeResult)` – Rohit Khanna Dec 14 '22 at 18:27
  • Thanks. Only one problem remains: OnInput during the slide displays the value 0 or 1 or 2 or 3 or 4 instead of 4 or 8 or 16 or 32 or 64. However, i tired : onInput={(e) =>{ set_minCaption(memoryDimension[e.minValue]) set_maxCaption(memoryDimension[e.maxValue]) setMinValue(memoryDimension[e.minValue]) setMaxValue(memoryDimension[e.maxValue]) }} – David Arboin Dec 14 '22 at 19:33
  • The problem was the absence of : minCaption={minCaption} maxCaption={maxCaption} – David Arboin Dec 14 '22 at 19:38
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community Dec 23 '22 at 12:59

1 Answers1

0

just delete typescript event definition from event function:

onInput={(e: ChangeResult) => {

to

onInput={(e) => {

and it will work

Alexey Masyukov
  • 141
  • 1
  • 3