Slider: Make slider focus and start sliding programmatically

[Gautierrr]

Is there a solution to make the slider starts sliding by clicking on another react component? With a method or something else...?

---

What I'm actually doing

• I'm using rc-slider to do a color picker/slider. Actually, I overlap my react component with a transparent rc-slider component. Each color is a react component with an onclick event to update state and the slider handle position.

Why am I overlapping?

• I'm using my onclick component event to update the slider value because native rc-slider click does not match my colors disposition. The interval between slider steps is always regular while my selected component is larger than the other ones, which cause an offset between steps and real colors placement.

What is my actual problem?

• In the gif below, I click on the color on the left of the handle (yellow item) but because of the offset, the next selected item is black...

[benjycui]

I don't think you need to use rc-slider in your use case.

Just use your component directly.

[Gautierrr]

If I use my component directly I can't slide after clicking because I need to click on my item and then click on the handle to slide the slider.

My component is heavily customized but it's still a slider. Without rc-slider, it does not fully work.

[benjycui]

Please provide a re-producible demo: http://codepen.io/benjycui/pen/aJooRE?editors=0011

[Gautierrr]

With rc-sliderevent:

• http://codepen.io/Gautierrr/pen/peNoWd
  --> You can reproduce the problem if you click directly on the right or left of the selected item. The next selected color will not be the expected color but I can slide after clicking.

With my onclick component event:

• http://codepen.io/Gautierrr/pen/peNJzz
  --> The problem is solved but I can't slide the slider directly. I have to use the rc-slider handle only.

The difference in code between this two demo is pointer-events: none; on rc-slider element (css).

[benjycui]

I don't understand, http://codepen.io/Gautierrr/pen/peNJzz?editors=0110 works fine in my opinion.

So, why did you need to change rc-slider.

Edit: OK, I understand it right now.

[benjycui]

start sliding programmatically

But I don't think it is a good idea.

And I think you can use a transform function to do so:

function transform(value, prevSelectedColorId) {
  // do something
  return currentSelectedColorId;
}

[Gautierrr]

Ok, thank's!