"Module '"rc-slider"' has no exported member 'Range'."

[alicerocheman]

import { Range } from 'rc-slider';
=> error: "Module '"rc-slider"' has no exported member 'Range'."

after upgrading to "rc-slider": "^10.0.0-alpha.6"

doc still says you can import Range from rc-slider.

forced to rollback.

[Ashvin-Pal]

I am using version > "rc-slider": "^10.0.0-alpha.6"

I think the documentation has not been updated. To use the range feature in version "^10.0.0-alpha.6"

You have to do this >

1. Import rc-slider like that >
   

2. To use the range functionality just add range to the slider component
   

[TimoWestland]

This seems to work, however now the onChange type is number | number[] instead of number[] which it should always be for a range slider. Is there a way to tell typescript that the value of onChange will be of type number? I see in the index.d.ts type that SliderProps has a generic called ValueType, but I'm not suer how to pass that from JSX.

[fvoordeckers]

value, defaultValue, onChange, onBeforeChange, onAfterChange are all using ValueType = number | number[] which is incorrect. The type of ValueType should be depending on the value of the range prop.

Something like:
range extends true ? number[] : number

[fvoordeckers]

Same for all the range-only properties, which are now optional. These properties should be undefined in the case range is not true and optional (or not) when it is a range selector. Otherwise the typings allow setting range specific properties on a simple slider.

[hilo2120]

onChange still has error. Any idea on how to type it?

Type 'Dispatch<SetStateAction<number[]>>' is not assignable to type '(value: number | number[]) => void'. Types of parameters 'value' and 'value' are incompatible. Type 'number | number[]' is not assignable to type 'SetStateAction<number[]>'. Type 'number' is not assignable to type 'SetStateAction<number[]>'.ts(2322)

[Ashvin-Pal]

I solved it on my side by just casting the type

const handleChange = (_input: number | number[]) => {
    /* if you're using range */
    const input = _input as number[] 

    /* if you're only using the slider  */
    const input = _input as number
}

[fvoordeckers]

onChange still has error. Any idea on how to type it?

Type 'Dispatch<SetStateAction<number[]>>' is not assignable to type '(value: number | number[]) => void'. Types of parameters 'value' and 'value' are incompatible. Type 'number | number[]' is not assignable to type 'SetStateAction<number[]>'. Type 'number' is not assignable to type 'SetStateAction<number[]>'.ts(2322)

@hilo2120 Looks like you are passing the state set action as an onchange event handler. You need to write a handleChange function that will call the state setter.

I solved it on my side by just casting the type

const handleChange = (_input: number | number[]) => {
    /* if you're using range */
    const input = _input as number[] 

    /* if you're only using the slider  */
    const input = _input as number
}

@Ashvin-Pal would make Typescript useless because we're still guessing the type. You could also check if the input is an Array and depend your typings on that result. But both are workarounds and should be fixed by a change in the typings based on the range param.

[Ashvin-Pal]

@fvoordeckers yeap I had no choice but to use a workaround for now.

[guillaumeBOSSIS]

@Ashvin-Pal or someone else. Hello, I can't figure how to display the tooltip in version 10. Any idea ?

[Ashvin-Pal]

@Ashvin-Pal or someone else. Hello, I can't figure how to display the tooltip in version 10. Any idea ?

You can check out the example over here > https://codesandbox.io/s/lzsr20?file=/App.tsx

[guillaumeBOSSIS]

Thanks, I finally went down to the previous version as it was kind of urgent. And finally it seems easier with the previous version !

[CBurrows87]

@Ashvin-Pal Hi, I am having trouble with getting the tooltips working in v 10 using typescript. I found you example which seems like it would have fixed the issue, but it's currently not working and complaining about tipprops? Any idea what would be needed to get it working again?

[schemata-issimo]

Attempted to upgrade but hit the same snag, agreed changing ValueType to something like fvoordeckers said would resolve the issue:

range extends true ? number[] : number

[Shamimrahman]

better use npm i rc-slider@9.6.5

[dotjsNet]

You must do imports like this

import Slider from "rc-slider";
const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

After that Range can accept the props.

[wwwouter]

I tried this with the latest version (10.1.0) and this does not seem to work:

Property 'createSliderWithTooltip' does not exist on type 'ForwardRefExoticComponent<SliderProps<number | number[]> & RefAttributes<SliderRef>>'.ts(2339)

Property 'Range' does not exist on type 'ForwardRefExoticComponent<SliderProps<number | number[]> & RefAttributes<SliderRef>>'.ts(2339)

Searching for createSliderWithTooltip (https://github.com/react-component/slider/search?q=createSliderWithTooltip) results in two hits in code, both are commented out.

[dotjsNet]

I tried this with the latest version (10.1.0) and this does not seem to work:

Property 'createSliderWithTooltip' does not exist on type 'ForwardRefExoticComponent<SliderProps<number | number[]> & RefAttributes<SliderRef>>'.ts(2339)

Property 'Range' does not exist on type 'ForwardRefExoticComponent<SliderProps<number | number[]> & RefAttributes<SliderRef>>'.ts(2339)

Searching for createSliderWithTooltip (https://github.com/react-component/slider/search?q=createSliderWithTooltip) results in two hits in code, both are commented out.

Check out this demo with source code http://react-component.github.io/slider/?path=/story/rc-slider--handle

[wwwouter]

@dotjsNet Have you tried this outside of the https://github.com/react-component/slider repository with the latest version of rc-slider?

If I ignore the typing by casting Slider to any and log createSliderWithTooltip, I get undefined back.

import Slider from 'rc-slider';
const { createSliderWithTooltip } = Slider as any;
console.log('createSliderWithTooltip', createSliderWithTooltip);

I suspect the code on http://react-component.github.io/slider/?path=/story/rc-slider--handle runs <v10.

Here is the commit that removes createSliderWithTooltip c33764e

[szamanr]

so a new non-beta major release introduced breaking changes and yet the documentation has not been updated, and it looks like the vast majority of PRs merged in this repo are not even reviewed. i'm sorry but this screams "shitty library". i'm out.

[code2be]

EDIT: PR Approved, Thanks !

PR made
#867

[princefishthrower]

@szamanr - have you found a decent alternative range slider?

[szamanr]

@szamanr - have you found a decent alternative range slider?

@princefishthrower no, i've pinned the dependency to 9.2.4. i left a note to look into react-compound-slider in the future.

[princefishthrower]

Found yet another slider component: https://github.com/n3r4zzurr0/react-range-slider-input but this one doesn't have types. Just found this nice blog post, at this point I'll accept a completely custom one, tired of searching for a library for such simple functionality: https://benhoneywill.com/building-a-range-slider-component-in-react/

[alissaVrk]

it seems that the examples are updated to the new version see /demo/handle
just the README and changelog is outdated

[alissaVrk]

@TimoWestland about onChange type
the SliderProps is generic you can pass the value type.
for range it will be SliderProps<number[]>

though there is a bug there.. since the Slider itself isn't generic

[diniththarushka]

I tried this with the latest version (10.1.0) and this does not seem to work:

Property 'createSliderWithTooltip' does not exist on type 'ForwardRefExoticComponent<SliderProps<number | number[]> & RefAttributes<SliderRef>>'.ts(2339)

Property 'Range' does not exist on type 'ForwardRefExoticComponent<SliderProps<number | number[]> & RefAttributes<SliderRef>>'.ts(2339)

Searching for createSliderWithTooltip (https://github.com/react-component/slider/search?q=createSliderWithTooltip) results in two hits in code, both are commented out.

Probably you have found an alternative way to achieve the requirement, posting this if someone is still looking for a solution...

You cannot create a range slider like this in the new versions although the documentation states this way. However, if you must create a custom handle with the tooltip, I suggest using handleRender prop, a callback which provides index,value,dragging and prefixCls fields as the 2nd fn parameter.

[wwwouter]

FYI, like others in other issues, I finally chose another library last week.

I looked at a few different options and Mantine was a good match for us.

import { RangeSlider } from '@mantine/core';

...

 <RangeSlider
                            min={0}
                            max={this.state.videoDuration}
                            minRange={0}
                            value={[this.state.fragmentRangeStart ?? 0, this.state.fragmentRangeEnd ?? 0]}
                            label={(value) => formatTimestamp(value)}
                            labelAlwaysOn
                            onChange={(value) => void this.onFragmentRangeChanged(value)}
                        />

[szamanr]

☝️ mantine looks interesting, note to self to have a look.

https://mantine.dev/