search

dataloop-ai / components

Dataloop's component library
Apache License 2.0
3 stars 15 forks source link

[FEATURE] {{ DL slider with range }} - {{ new requirements }} #792

Open rotemshaham opened 10 months ago

rotemshaham commented 10 months ago

UI spec: https://www.figma.com/file/UTx83SSFrIOohMzG9e2rAj/dataloop-design-system?type=design&node-id=17600%3A31327&mode=design&t=IKXPMj5MgZU7pEsy-1

Component states: https://www.figma.com/file/UTx83SSFrIOohMzG9e2rAj/dataloop-design-system?type=design&node-id=17599%3A50015&mode=design&t=IKXPMj5MgZU7pEsy-1

Main spec:

  1. The slider should be a responsive component. The labels & section length should be calculated in percentage.

  2. The slider has up to 5 sections.

  3. Each section has a label with the same color. Colors are defined in the Figma spec.

  4. Gaps, sizes, and colors are defined in the spec.

  5. Behavior:

    • Users can change the range of each section by the circles.
    • The value of each section will be displayed next to the label.
    • In case of a long label, display at the end 3 dots + (value) + tooltip on hover. Screenshot 2023-12-26 at 14 27 26

  6. States:

    Screenshot 2023-12-26 at 14 27 32
guyDataloop commented 10 months ago

Relates to ticket - DAT-62655