Skip to content

feat(design-system): add DsSlider component [AR-77548] - #629

Open
vpolessky-dn wants to merge 5 commits into
drivenets:mainfrom
vpolessky-dn:feat/AR-77548-add-slider_v01
Open

feat(design-system): add DsSlider component [AR-77548]#629
vpolessky-dn wants to merge 5 commits into
drivenets:mainfrom
vpolessky-dn:feat/AR-77548-add-slider_v01

Conversation

@vpolessky-dn

Copy link
Copy Markdown
Collaborator

No description provided.

@netlify

netlify Bot commented Jul 29, 2026

Copy link
Copy Markdown

Deploy Preview for drivenets-design-system ready!

Name Link
🔨 Latest commit da50df4
🔍 Latest deploy log https://app.netlify.com/projects/drivenets-design-system/deploys/6a6b255515456f000820093b
😎 Deploy Preview https://deploy-preview-629--drivenets-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@iromanchuk-dn iromanchuk-dn changed the title feat(design-system): add DsSlider_v01 component [AR-77548] feat(design-system): add DsSlider component [AR-77548] Jul 29, 2026
* Drives thumb and track sizing together (S/M/L → 16/20/24px thumb, 2/4/8px track).
* @default 'medium'
*/
size?: DsSliderSize;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make this prop responsive

* Granularity that the value snaps to. Must be greater than 0.
* @default 1
*/
step?: number;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make this prop responsive

/**
* Accessible name per thumb. Required for `type="range"` (e.g. `['Minimum', 'Maximum']`).
*/
thumbLabels?: string[];

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make this prop responsive

Comment on lines +8 to +14
const toArray = (value: DsSliderValue | undefined): number[] | undefined => {
if (value === undefined) {
return undefined;
}

return Array.isArray(value) ? value : [value];
};

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's extract it into ds-slider.utils.ts

flex: 1;
height: var(--ds-slider-track-height);
background: var(--background-secondary-hover);
border-radius: 9999px;

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make scss var for this value

outline: none;
cursor: pointer;
transition:
width 0.2s,

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make scss var for 0.2s

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Include this component into "packages/design-system/tests/storybook/docs-snippets.docs.test.ts" and make sure code snippets look good.

@iromanchuk-dn iromanchuk-dn left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!
I've left several comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants