Slider

Playground

'use client';
import { useState, useEffect, useRef } from 'react';
import { Slider } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "disabled": false,
    "showValue": true,
    "value": 64
  };
  const [value, setValue] = useState(settings.value);
  const previousSetting = useRef(settings.value);
  useEffect(() => {
    if (previousSetting.current === settings.value) return;
    previousSetting.current = settings.value;
    setValue(settings.value);
  }, [settings.value]);
  return (
    <div style={{ width: 280, maxWidth: '100%', display: 'grid', gap: 12 }}>
      {settings.showValue && <span aria-hidden="true">Value: {value}</span>}
      <Slider
        aria-label="Value"
        value={value}
        onValueChange={(next) => {
          setValue(next);
        }}
        disabled={settings.disabled}
        min={0}
        max={100}
        step={1}
      />
    </div>
  );
}

Properties

Value64

Show value

Disabled

Usage

단일 number 값을 받습니다. onValueChange에서 화면을 갱신하고 비용이 큰 작업은 onValueCommit으로 처리합니다.

'use client';
import { useState } from 'react';
import { Slider } from '@mbsw/ui';

export default function Example() {
  const [value, setValue] = useState(64);
  return (
    <Slider
      aria-label="Value"
      value={value}
      onValueChange={setValue}
      min={0}
      max={100}
    />
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

Slider