CODEWITHSUNDEEP
javascripthtmlcssreactjs
program_bumble_bee
program_bumble_bee

Reputation: 305

Dividing custom range slider into sections

I have a custom range slider in react that renders the toggle(range) value dynamically values from API. Further, the value or amount the slider covers needs to be divided into sub-sections, whose widths need to be the sum of the value or amount the slider covers.

For example, If the slider covers 220 value/range, it should be divided into 2 sections (say) with a width of sub-sections equivalent to 120 & 100 respectively. The divided values are received from the API itself. It will look something like this:

enter image description here

I was able to handle the maximum functionality of this, except to divide the slider into sections properly & set the dynamic width of the sections.

I have included the working snippet:

https://codesandbox.io/s/nifty-matsumoto-5nnrv

Some of the CSS might seem a bit messed up due to browser compatibility-issue, but it pretty works to replicate my problem.

Upvotes: 1

Views: 460

Answers (1)

Anzor Asadov
Anzor Asadov

Reputation: 402

here is a working solution. Please make sure to refactor, as it is quick and dirty.

  1. I have added a calcSlideWidth function that determindes the correct width of a slide.
  2. I pass the calculated pecentage value to the span that contains the sliderPopup
  3. I have extracted percent to the State

https://codesandbox.io/s/competent-http-br6s6?file=/src/SegmentedSlider.js

Upvotes: 1

Related Questions