n3r4zzurr0 / react-range-slider-input Goto Github PK

Hey, thanks for this library. How do I use it in a TSX (TypeScript) project?

Thank you for the great slider!

I have a question regarding usage of "value" prop. When I am trying to pass the value and control it with "onInput", I receive fully disabled slider. Can someone please help me to understand what I'm doing wrong?

Here the link to codesandbox with an example: https://codesandbox.io/s/blue-water-skrbr4?from-embed

Not compatible with next js as a global css is being imported

Error Message
error - ./node_modules/react-range-slider-input/dist/components/index.css Global CSS cannot be imported from within node_modules. Read more: https://nextjs.org/docs/messages/css-npm Location: node_modules/react-range-slider-input/dist/components/RangeSlider.js

More info: https://nextjs.org/docs/messages/css-npm

When I give the max={0} to the component, max value set as 100. If I give the max={"0"} value set properly 0.

import Slider from 'react-range-slider-input';
import 'react-range-slider-input/dist/style.css';
...
const [sliderVal, setSliderVal] = useState(5000);
...
<Slider
  className="single-thumb"
  max={10000}
  min={0}
  onInput={(value: number) => setSliderVal(value[1])}
  rangeSlideDisabled={true}
  step={100}
  thumbsDisabled={[true, false]}
  value={[0, sliderVal]}
/>

With the code above the first thumb is still displayed.
Image
Using v3.0.7.

The library currently supports a custom css class that goes along with range-slider in the root/wrapper element. This issue is more about allowing developer to completely replace all range-sliders classes with custom ones.

Motivation

Allowing developers to completely replaces the default css variables allows them to:

• Support CSS Modules
• Have more granular control
• Avoid collisions (e.g. an app could already have a global range-slider class for something else)

Suggestion

Replace the className props with a classNames prop that accepts an object

type Props = {
   classNames?: {
      slider?: string,
      thumb?: string,
      range?: string,
   }
}

classNames should be optional as well as the keys, and default to the current classes.

When I resize the window I get an error

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

This error does not seem to affect the functionality in my use case, but the error is thrown for each resize event fired.

I assume this is coming from the code below, but I don't understand how window could be undefined when I'm manually resizing my browser window.

I'm using next.js and this error happens in development and production.

can we have properties where user can add customizable background images for slider instead of only having colors

Dragging a whole range with a react controlled value causes the slider to move with a different speed than the mouse cursor. It looks fine when you move the slider fast, but when moving it slowly the slider "fly away" from the cursor.

You can see the effect in the sandbox demo in the "Controlled" component by dragging the whole slider slowly or fast. It does not happen for "Default" nor if you only drag one end. However, it does appear like the "Default" might be self correcting itself...

Tested in Chrome and Safari on Mac.