How to create a circular slider with breakpoints?

Viewed 735

I am new to react-native and i want to achieve the below design in react-native

Image link

I am trying to achieve this

  • The blue circle is a slider to chose the date(Date Picker)
  • The circle inside the slider(Date Picker) changes color when the date is changed
  • and finally an image inside the circle.

it would be great if anyone could provide links for reference or a library which i can use to create the design shown in the image.

thanks in advance.

2 Answers

Well this is a custom slider which has some break point values. As the slider changes there is a change in the state and based on that the below description view is rendered.

Use this slider and give some css colors and styles to make it round

Related