🧱 ZUI: Slider

[ziggabyte]

Description

A slider component to select a value on a scale

Screenshots

Figma link

https://www.figma.com/design/yIQMDEFSgkUOrSaJpg3k7N/ZUI?node-id=11017-146187&t=IXbLVUwLQz20vRKg-4
You need to be logged into a Figma account to properly view the Figma content.

Requirements

• Matches the styles as described in the Figma
• Has two sizes: small and medium
• Has two orientations: horizontal and vertical
• Has three ways: continuous slider, discrete steps and range
• Can show a little tooltip-esque label above the sliding "dot"
• Shows labels at the start and end of the slider
• Can be disabled

Open questions

Workflow

Suggestion for implementation

Use the MUI Slider component for this.

Git

The main git branch for the work on the new design system is undocumented/new-design-system. Unless otherwise instructed, do your work on a new branch branched off from this branch.

Name your branch issue-number/zui-name, ex: issue-928/zui-button for a branch where work is done that is documented in the issue with number 928, where a button component is being made.

Storybook

Use Storybook to develop the new design system components. If you are not familiar with working with Storybook, please ask and Ziggi or someone else will be happy to introduce you!
When you have checked out the branch undocumented/new-design-system (and, as always when checking out a branch just to be sure, run yarn install), run yarn storybook in the terminal. This starts Storybook locally, and should open your browser to localhost:6006 where you see all the components. Note that you want to only look at the ones under the "Components" headline.

Files

Create a folder in src/zui/components and give it a name for your component, like ZUIButton. Inside that folder, create one file index.tsx (this is where you write your component) and one index.stories.tsx (this is where you write your Storybook stories). Look at the components in src/zui/components for inspiration/reference! Note that there are lots of components with names that start with "ZUI" outside the src/zui/components folder, but only the ones in src/zui/components are relevant as reference/inspiration for the work you will be doing.