Component documentation
SGUI / Development
Single values, numeric ranges and multiple thresholds with accessible keyboard and pointer input.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No direct parents in the documented component catalog.
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function AdjustableSliderExample() {
const [value,setValue]=useState<number|number[]>(5);
return (
<>
<Slider label={"Target"} value={value} onValueChange={setValue} min={1} max={10} step={1} orientation="horizontal" increment={1} showTicks={false} snapToIncrements={false} tickAppearance="dot" fill="auto" density="comfortable" disabled={false} invalid={false} showValue={true} showBounds={true} marks={[]} formatOptions={{"minimumFractionDigits":0,"maximumFractionDigits":0,"style":"decimal"}}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(40);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="compact" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([25,75]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="compact" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(40);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([25,75]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(40);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="vertical" density="compact" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([25,75]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="vertical" density="compact" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(40);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="vertical" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([25,75]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="vertical" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(3);
return (
<>
<Slider label={"Confidence"} value={value} onValueChange={setValue} min={1} max={5} step={1} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[{"value":1,"label":"Low"},{"value":3,"label":"Medium"},{"value":5,"label":"High"}]} description={"One answer on a five-point scale. Marks explain the scale; step controls which values are available."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(1.5);
return (
<>
<Slider label={"Exposure adjustment"} value={value} onValueChange={setValue} min={-5} max={5} step={0.25} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[{"value":-5,"label":"−5"},{"value":0,"label":"0"},{"value":5,"label":"+5"}]} fillOffset={0}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([200,700]);
return (
<>
<Slider label={"Budget"} value={value} onValueChange={setValue} min={0} max={1000} step={10} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} formatOptions={{"style":"currency","currency":"USD","maximumFractionDigits":0}} thumbLabels={["Minimum budget","Maximum budget"]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(12.5);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={0.01} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} formatOptions={{"style":"currency","currency":"USD","minimumFractionDigits":2,"maximumFractionDigits":2}} description={"Selectable values advance by one cent. Display and accessible values keep exactly two decimal places; callbacks remain raw numbers."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(0.255);
return (
<>
<Slider label={"Allocation"} value={value} onValueChange={setValue} min={0} max={1} step={0.0001} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} formatOptions={{"style":"percent","minimumFractionDigits":2,"maximumFractionDigits":2}} description={"0.255 is displayed as 25.50%. One percentage point is 0.01 in this fractional scale."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(25.5);
return (
<>
<Slider label={"Completion"} value={value} onValueChange={setValue} min={0} max={100} step={0.01} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} formatOptions={{"style":"unit","unit":"percent","minimumFractionDigits":2,"maximumFractionDigits":2}} description={"Percentage-point values stay on a 0–100 scale: 25.5 displays as 25.50% without multiplying the numeric value."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([20,50,80]);
return (
<>
<Slider label={"Performance thresholds"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} thumbLabels={["Lower threshold","Middle threshold","Upper threshold"]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([20,50,80]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="before" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} thumbLabels={["Lower threshold","Middle threshold","Upper threshold"]} description={"Before fills from the minimum to the first handle; after fills from the last handle to the maximum; between joins the outer handles; none leaves the rail unfilled."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([20,50,80]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="after" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} thumbLabels={["Lower threshold","Middle threshold","Upper threshold"]} description={"Before fills from the minimum to the first handle; after fills from the last handle to the maximum; between joins the outer handles; none leaves the rail unfilled."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([20,50,80]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="between" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} thumbLabels={["Lower threshold","Middle threshold","Upper threshold"]} description={"Before fills from the minimum to the first handle; after fills from the last handle to the maximum; between joins the outer handles; none leaves the rail unfilled."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([20,50,80]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="none" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} thumbLabels={["Lower threshold","Middle threshold","Upper threshold"]} description={"Before fills from the minimum to the first handle; after fills from the last handle to the maximum; between joins the outer handles; none leaves the rail unfilled."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(23);
return (
<>
<Slider label={"Choice 1"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="none" showBounds increment={10} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} description={"Dots show ten-unit increments. The one-unit step still allows values between dots."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(20);
return (
<>
<Slider label={"Choice 1"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="none" showBounds increment={10} showTicks={true} snapToIncrements={true} tickAppearance="dot" marks={[]} description={"Pointer and keyboard selection snap to 0, 10, 20, through 100."}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>([20,80]);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="vertical" density="comfortable" fill="auto" showBounds increment={20} showTicks={true} snapToIncrements={true} tickAppearance="line" marks={[]}/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(40);
return (
<>
<Slider label={"Amount"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} disabled/>
</>
);
}
'use client';
import { useState } from 'react';
import {Slider} from '@structured-growth/sg-ui/primitives';
export default function SliderExampleExample() {
const [value,setValue]=useState<number|number[]>(35);
return (
<>
<Slider label={"Target score"} value={value} onValueChange={setValue} min={0} max={100} step={1} orientation="horizontal" density="comfortable" fill="auto" showBounds increment={undefined} showTicks={true} snapToIncrements={false} tickAppearance="dot" marks={[]} invalid errorMessage={"Choose a target of at least 50."} description={"The host owns this validation rule."}/>
</>
);
}
This example owns an explicit locale scope so pointer direction, value formatting and layout follow Arabic together.
'use client';
import { useState } from 'react';
import { Provider } from '@structured-growth/sg-ui/theme';
import {Slider} from '@structured-growth/sg-ui/primitives';
import {SGTranslationProvider,formatIcuMessage} from '@structured-growth/sg-ui';
export default function ArabicSliderExample() {
const [value,setValue]=useState(40);
return (
<>
<SGTranslationProvider value={{locale:"ar-SA",t:(_key,options)=>formatIcuMessage(options.defaultMessage,"ar-SA",options.values),useNamespace:()=>{}}}><Provider><Slider label="المستوى" value={value} onValueChange={setValue} showBounds/></Provider></SGTranslationProvider>
</>
);
}
The text field is a separate control sharing host state. Blur accepts a whole number from 0 to 100; invalid text restores the current value.
'use client';
import { useState } from 'react';
import {Slider,TextField,Stack} from '@structured-growth/sg-ui/primitives';
export default function PreciseSliderExample() {
const [value,setValue]=useState(40);
const [draft,setDraft]=useState("40");
const change=(next:number)=>{setValue(next);setDraft(String(next));};
const apply=()=>{const parsed=Number(draft);if(draft.trim()&&Number.isFinite(parsed))change(Math.min(100,Math.max(0,Math.round(parsed))));else setDraft(String(value));};
return (
<>
<Stack gap={3}><Slider label="Opacity" value={value} onValueChange={change} showBounds/><TextField label="Exact opacity (0–100)" inputMode="decimal" value={draft} onValueChange={setDraft} onBlur={apply}/></Stack>
</>
);
}
Each handle submits a named numeric value. Reset restores the defaults; reviewing creates a local draft without persistence.
'use client';
import { useState } from 'react';
import {Slider,Stack,Button,Typography} from '@structured-growth/sg-ui/primitives';
export default function BudgetFormExample() {
const [result,setResult]=useState("");
return (
<>
<form onSubmit={event=>{event.preventDefault();const data=new FormData(event.currentTarget);setResult(`Draft budget: ${data.get("budget[0]")}–${data.get("budget[1]")}`);}} onReset={()=>setResult("")}><Stack gap={3}><Slider label="Budget range" name="budget" defaultValue={[200,700]} min={0} max={1000} step={10} thumbLabels={["Minimum budget","Maximum budget"]} formatOptions={{style:"currency",currency:"USD",maximumFractionDigits:0}} showBounds/><Stack direction="row" gap={2}><Button type="submit">Review budget</Button><Button type="reset" variant="outlined">Reset</Button></Stack>{result&&<Typography role="status">{result}</Typography>}</Stack></form>
</>
);
}