Skip to main content

Slider

MSK Slider는 범위 입력(<input type="range">)에 실시간 값 표시와 채움 게이지를 더한 primitive입니다. Filament range suffix 표시 대체재로도 사용합니다.

Preview​

34%

Data API​

<div data-msk-slider data-msk-slider-suffix="%">
  <input type="range" min="0" max="100" value="34" data-msk-slider-input>
  <output data-msk-slider-output>34%</output>
</div>

JavaScript API​

window.MSK.ui.slider.setValue(root, 60);
window.MSK.ui.slider.refresh(root);

Events​

root.addEventListener('msk:slider-change', (event) => {
  console.log(event.detail.value, event.detail.percent);
});

Accessibility​

  • 네이티브 range 입력을 사용하므로 키보드(←/→/Home/End)가 기본 동작합니다.
  • 채움 게이지는 --msk-ui-slider-percent CSS 변수로 그려지고, <output> 텍스트가 즉시 갱신됩니다.
  • data-msk-slider-suffix로 단위(%, px 등)를 출력에 붙입니다.