Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
nahushf opened this issue Jun 20, 2018 · 13 comments · Fixed by #178
Closed

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

nahushf opened this issue Jun 20, 2018 · 13 comments · Fixed by #178

Comments

@nahushf
Copy link

nahushf commented Jun 20, 2018

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.

image

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
Copy link

danadn commented Jun 24, 2018

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
Copy link

We are experiencing this too.

@msheal
Copy link

msheal commented Jul 10, 2018

Same issue =(

@k0nserv
Copy link

k0nserv commented Jul 16, 2018

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
Copy link

k0nserv commented Jul 16, 2018

@mpowaga do you have insight on this?

@k0nserv
Copy link

k0nserv commented Jul 17, 2018

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
Copy link

danadn commented Jul 19, 2018

I've just tested using the default example:
image

Did anyone find the solution?

For some reason the right handle offset wrong:
image

Still debugging...

@k0nserv
Copy link

k0nserv commented Jul 19, 2018

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

@danadn
Copy link

danadn commented Jul 21, 2018

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

Thanks @k0nserv !

@geoalexidis
Copy link

geoalexidis commented Dec 20, 2018

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
Copy link

stale bot commented Sep 22, 2019

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.

@stale stale bot added wontfix and removed wontfix labels Sep 22, 2019
@stonebk
Copy link
Contributor

stonebk commented Oct 31, 2019

Closing due to inactivity.

@stonebk stonebk closed this as completed Oct 31, 2019
@Narigo
Copy link

Narigo commented May 9, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants