How to insert additional element to third-party component?

Question

I use the third-party component named "slider" (rc-slider). I need to add an additional element inside the slider slider (div class = "rc-slider-handle").

<div class="rc-slider">
   <div class="rc-slider-rail" style="..."></div>
   <div class="rc-slider-track" style="..."></div>
   <div class="rc-slider-step"></div>
   <div role="slider" tabindex="0" ... class="rc-slider-handle" style="..."> 
       // new element should be added here
   </div>
   <div class="rc-slider-mark"></div>
</div>

Using from my react component:

    <Slider
      min={...}
      max={...}
      value={...}
      onChange={...}
    />

n1stre · Accepted Answer · 2018-09-06 15:07:35Z

1

According to rc-slider docs, you're able to pass a handle prop:

<Slider
  min={...}
  max={...}
  value={...}
  onChange={...}
  handle={() => <div className="rc-slider-handle" />}
/>

answered Sep 6, 2018 at 15:07

n1stre

6,1064 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to insert additional element to third-party component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related