Both slider handles on the min side when rendering slider in a dropdown

[nahushf]

I am trying to render a slider in a dropdown menu(I am using a custom react bootstrap dropdown ). When doing this however both the handles are at the left most end of the slider. The slider behaves normally after clicking a few times on the slider.

Note: I am setting the value manually here to (0, 100) but still both the handles are at 0.

I am currently using version 0.8.0.

Why could this be happening?

[danadn]

I'm experiencing the same issue.

The weird thing is that it worked at some point... did you manage to find the way to make it work?

[georgegillams]

We are experiencing this too.

[msheal]

Same issue =(

[k0nserv]

What version is everyone using? We are on 0.9.0 and I'm curious if this relates to the change in 0.10.2 that prevents flickering. I can reliably reproduce that flickering on our version.

[k0nserv]

@mpowaga do you have insight on this?

[k0nserv]

I dug into this some more and the issue is resolved on 0.11.2. I think th peer depedency needs to be change as described in #139, but other than that just upgrading should solve this

[danadn]

I've just tested using the default example:

Did anyone find the solution?

For some reason the right handle offset wrong:

Still debugging...

[k0nserv]

@danadn are you on the latest version? I could not replicate it on that version

[danadn]

Ok, guaranteed that "version": "0.11.2" fixes it.

Thanks @k0nserv !

[geoalexidis]

Ok so I experienced the same problem, and upgrading to "0.11.2" didn't fix it. I remember that on earlier stages this worked just fine. Anyway...

Instead, I found a workaround, by assigning a key to my component, that matches if the dropdown is open or closed. That way the component will be rerendered.

So something like this did the trick for me, where filterBlockOpen is a boolean for the dropdown toggle.

<FilterSlider key={`${filterBlockOpen}`} filter={filter} />;

Don't know if that helps anyone but thought it might be worth sharing.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stonebk]

Closing due to inactivity.

[Narigo]

@geoalexidis thank you for sharing this, I still experienced this issue with version 1.0.5.

@stonebk I've created a reproducer in Storybook, maybe it can be used for Styleguidist as well to identify the issue:

import React, { useState, useEffect } from "react";
import { action } from "@storybook/addon-actions";
import ReactSlider from "react-slider";

export const TestDropdown = () => {
  const [open, setOpen] = useState<boolean>(false);
  useEffect(() => {
    setOpen(true);
  }, [setOpen]);
  return (
    <div style={{ display: open ? "block" : "none", width: "100%" }}>
      <ReactSlider
        key={open ? "rs-open" : "rs-close"} // <- if you remove this line, you should see the issue
        defaultValue={[15, 60]}
        max={60}
        min={5}
        onChange={action("changed")}
        renderThumb={(props, state) => (
          <div
            {...props}
            style={{
              ...props.style,
              backgroundColor: "#000",
              color: "#fff",
              padding: 10,
            }}
          >
            {state.valueNow}
          </div>
        )}
        renderTrack={(props, state) => (
          <div
            {...props}
            style={{
              ...props.style,
              border: "20px solid #f00",
            }}
          ></div>
        )}
      />
    </div>
  );
};