0

I'm developing a numerical Slider component in React. It actually works right now and is fully functional, but there is a single issue. I set the width of the thumb and total slider via CSS, and I like doing it that way, as it's flexible.

The slider and thumb width is also needed for calculations, such as calculating the max position of the slider, or the position of the thumb relative to the absolute.

So, I have functions like this:

getSliderWidth = () => {
  return this.sliderRef.current ? this.sliderRef.current.offsetWidth : 0;
}

getThumbWidth = () => {
  return this.sliderThumbRef.current ? this.sliderThumbRef.current.clientWidth : 0;
}

Where the refs are defined in the render function like so:

<div ref={this.sliderRef} className="slider-range">
  <div className="slider-range-connect" style={connectStyle}></div>
  <div ref={this.sliderThumbRef} className="slider-range-thumb" style={thumbStyle}></div>
</div>

The issue with this, though, is that the widths are only known after the first render. The refs aren't available until it is first rendered. So, I think what I need to do is force a re-render, such that when the component is initially loaded, it is rendered one more time. This is because the initial render function needs to know the relative max position and thumb position in order to render the initial elements.

So, is there a "React" way to do this, or am I missing something? Is the ideal solution here to have some sort of boolean flag, and in the initial mount function, to check this flag, and if it is the first render, to do another render, and then to set the flag? That doesn't seem very "React"ish, so I was wondering if there is something more elegant.

Chron Bag
  • 587
  • 4
  • 17
  • 1
    You're essentially right, you need to only do it after it's first rendered.For this you can use `componentDidMount` and a simple booleanflag in state. There's other questions asking the same thing, such as this one: https://stackoverflow.com/questions/35153599/reactjs-get-height-of-an-element – Jayce444 Nov 16 '19 at 23:05
  • 1
    Oh, nice, if I do it in `componentDidMount` then I can reference the ref directly and set the state right there, all without using a flag. Nice, thanks for the post link! – Chron Bag Nov 16 '19 at 23:13

0 Answers0