Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit67a9127

Browse files
authored
feat: add slider component (#17431)
The slider component is part of the components supported by DynamicParametersThere are no Figma designs for the slider component. This is based onthe shadcn slider.<img width="474" alt="Screenshot 2025-04-16 at 19 26 11"src="https://github.com/user-attachments/assets/87370a22-4984-48f7-875b-105568739003"/>
1 parent9fe3fd4 commit67a9127

File tree

2 files changed

+96
-0
lines changed

2 files changed

+96
-0
lines changed
Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
importtype{Meta,StoryObj}from"@storybook/react";
2+
importReactfrom"react";
3+
import{Slider}from"./Slider";
4+
5+
constmeta:Meta<typeofSlider>={
6+
title:"components/Slider",
7+
component:Slider,
8+
args:{},
9+
argTypes:{
10+
value:{
11+
control:"number",
12+
description:"The controlled value of the slider",
13+
},
14+
defaultValue:{
15+
control:"number",
16+
description:"The default value when initially rendered",
17+
},
18+
disabled:{
19+
control:"boolean",
20+
description:
21+
"When true, prevents the user from interacting with the slider",
22+
},
23+
},
24+
};
25+
26+
exportdefaultmeta;
27+
typeStory=StoryObj<typeofSlider>;
28+
29+
exportconstDefault:Story={};
30+
31+
exportconstControlled:Story={
32+
render:(args)=>{
33+
const[value,setValue]=React.useState(50);
34+
return(
35+
<Slider{...args}value={[value]}onValueChange={([v])=>setValue(v)}/>
36+
);
37+
},
38+
args:{value:[50],min:0,max:100,step:1},
39+
};
40+
41+
exportconstUncontrolled:Story={
42+
args:{defaultValue:[30],min:0,max:100,step:1},
43+
};
44+
45+
exportconstDisabled:Story={
46+
args:{defaultValue:[40],disabled:true},
47+
};
48+
49+
exportconstMultipleThumbs:Story={
50+
args:{
51+
defaultValue:[20,80],
52+
min:0,
53+
max:100,
54+
step:5,
55+
minStepsBetweenThumbs:1,
56+
},
57+
};

‎site/src/components/Slider/Slider.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* Copied from shadc/ui on 04/16/2025
3+
*@see {@link https://ui.shadcn.com/docs/components/slider}
4+
*/
5+
import*asSliderPrimitivefrom"@radix-ui/react-slider";
6+
import*asReactfrom"react";
7+
8+
import{cn}from"utils/cn";
9+
10+
exportconstSlider=React.forwardRef<
11+
React.ElementRef<typeofSliderPrimitive.Root>,
12+
React.ComponentPropsWithoutRef<typeofSliderPrimitive.Root>
13+
>(({ className, ...props},ref)=>(
14+
<SliderPrimitive.Root
15+
ref={ref}
16+
className={cn(
17+
"relative flex w-full items-center h-1.5",
18+
className,
19+
"touch-none select-none",
20+
)}
21+
{...props}
22+
>
23+
<SliderPrimitive.TrackclassName="relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
24+
<SliderPrimitive.RangeclassName="absolute h-full bg-content-primary"/>
25+
</SliderPrimitive.Track>
26+
<SliderPrimitive.Thumb
27+
className="block h-4 w-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
28+
focus-visible:outline-none hover:border-content-primary
29+
focus-visible:ring-0 focus-visible:ring-content-primary focus-visible:ring-offset-surface-primary
30+
disabled:pointer-events-none data-[disabled]:opacity-100 data-[disabled]:border-border"
31+
/>
32+
<SliderPrimitive.Thumb
33+
className="block h-4 w-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
34+
focus-visible:outline-none hover:border-content-primary
35+
focus-visible:ring-0 focus-visible:ring-content-primary focus-visible:ring-offset-surface-primary
36+
disabled:pointer-events-none data-[disabled]:opacity-100 data-[disabled]:border-border"
37+
/>
38+
</SliderPrimitive.Root>
39+
));

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp