Slider
범위 안의 값을 드래그로 고릅니다. 정확한 값이 중요하면 Text Field 를 함께 둡니다.
1. Default
채워진 트랙은 --p 커스텀 속성(현재 %)으로 그립니다. JS 로 value 변경 시 --p 도 함께 갱신합니다.
HTML
<div class="slider">
<div class="row"><label for="s1">탐지 민감도</label><span class="val">60</span></div>
<input id="s1" type="range" min="0" max="100" value="60" style="--p:60%">
</div>CSS · .slider
/* JS Design System v0.6 · .slider · 토큰(var(--*))은 assets/style.css :root 참고 */
.slider{display:flex;flex-direction:column;gap:8px;min-width:280px;font-size:12px}
.slider .row{display:flex;justify-content:space-between;color:var(--text-secondary)}
.slider .val{font-weight:600;color:var(--text-primary)}
.slider input[type=range]{width:100%;height:20px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent);margin-top:-7px;box-shadow:var(--shadow-1)}
.slider input[type=range]::-moz-range-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent)}
.slider input[type=range]:disabled{opacity:.4;cursor:not-allowed}
.slider .ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);padding:0 4px}React · @jiran/ds-react
import { Slider } from "@jiran/ds-react";
export default function Example() {
return <Slider id="s1" label="탐지 민감도" defaultValue={60} />;
}2. With Ticks
단계가 정해진 값은 step 과 눈금을 보여줍니다.
HTML
<div class="slider">
<div class="row"><label for="s2">로그 보관</label><span class="val">90일</span></div>
<input id="s2" type="range" min="30" max="180" step="30" value="90" style="--p:40%">
<div class="ticks"><span>30</span><span>180</span></div>
</div>CSS · .slider
/* JS Design System v0.6 · .slider · 토큰(var(--*))은 assets/style.css :root 참고 */
.slider{display:flex;flex-direction:column;gap:8px;min-width:280px;font-size:12px}
.slider .row{display:flex;justify-content:space-between;color:var(--text-secondary)}
.slider .val{font-weight:600;color:var(--text-primary)}
.slider input[type=range]{width:100%;height:20px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent);margin-top:-7px;box-shadow:var(--shadow-1)}
.slider input[type=range]::-moz-range-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent)}
.slider input[type=range]:disabled{opacity:.4;cursor:not-allowed}
.slider .ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);padding:0 4px}React · @jiran/ds-react
import { Slider } from "@jiran/ds-react";
export default function Example() {
return <Slider id="s2" label="로그 보관" min={30} max={180} step={30} defaultValue={90} valueText={(v) => `${v}일`} ticks={[30, 180]} />;
}3. Disabled
HTML
<div class="slider">
<div class="row"><label for="s3">대역폭 제한</label><span class="val">—</span></div>
<input id="s3" type="range" value="40" style="--p:40%" disabled>
</div>CSS · .slider
/* JS Design System v0.6 · .slider · 토큰(var(--*))은 assets/style.css :root 참고 */
.slider{display:flex;flex-direction:column;gap:8px;min-width:280px;font-size:12px}
.slider .row{display:flex;justify-content:space-between;color:var(--text-secondary)}
.slider .val{font-weight:600;color:var(--text-primary)}
.slider input[type=range]{width:100%;height:20px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent);margin-top:-7px;box-shadow:var(--shadow-1)}
.slider input[type=range]::-moz-range-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent)}
.slider input[type=range]:disabled{opacity:.4;cursor:not-allowed}
.slider .ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);padding:0 4px}React · @jiran/ds-react
import { Slider } from "@jiran/ds-react";
export default function Example() {
return <Slider id="s3" label="대역폭 제한" defaultValue={40} disabled />;
}Props
HTML 에서는 클래스와 속성으로, React(@jiran/ds-react)에서는 같은 이름의 prop(variant · size …)으로 변형·상태를 지정합니다.
| Prop / Class | Type · Values | Default | Description |
|---|---|---|---|
| .slider | container | — | .row(라벨·값) + input[type=range](+ .ticks) |
| --p | css var (%) | 50% | 채워진 트랙 비율. value 와 동기화 |
| min / max / step | attribute | 0 / 100 / 1 | 네이티브 속성 |
| disabled | attribute | — | 비활성 |
Usage
React: @jiran/ds-react 패키지를 설치하고 style.css 를 한 번 import 하면 위 React 탭 코드를 그대로 쓸 수 있습니다(React Package). HTML: assets/style.css 를 연결하고(일부만 필요하면 아래 컴포넌트 CSS 복사), 동작이 필요하면 assets/ds.js 를 함께 넣습니다 — 이 페이지의 프리뷰가 그 스크립트로 동작합니다. 색은 전부 토큰(var(--accent) 등)을 참조하므로 --accent-* 만 제품 컬러로 바꾸면 됩니다.
React @jiran/ds-react
npm i @jiran/ds-react
// main.tsx — 앱 진입점에서 한 번
import "@jiran/ds-react/style.css";
// 컴포넌트
import { Slider } from "@jiran/ds-react";HTML
<!-- 1) 토큰 + 전체 컴포넌트 스타일 한 번에 연결 -->
<link rel="stylesheet" href="assets/style.css">
<!-- 동작(드롭다운·탭·달력·표 정렬/선택·토스트 등) — 순수 JS 한 파일. React 제품은 불필요 -->
<script src="assets/ds.js" defer></script>
<!-- 2) 또는 아래 "Component CSS" 만 프로젝트 CSS 에 붙이고,
:root 토큰은 Foundations › Design Token 에서 복사 -->Component CSS .slider
/* JS Design System v0.6 · .slider · 토큰(var(--*))은 assets/style.css :root 참고 */
.slider{display:flex;flex-direction:column;gap:8px;min-width:280px;font-size:12px}
.slider .row{display:flex;justify-content:space-between;color:var(--text-secondary)}
.slider .val{font-weight:600;color:var(--text-primary)}
.slider input[type=range]{width:100%;height:20px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent);margin-top:-7px;box-shadow:var(--shadow-1)}
.slider input[type=range]::-moz-range-track{height:6px;border-radius:var(--radius-full);background:linear-gradient(to right,var(--accent-graphic) var(--p,50%),var(--fill-strong) var(--p,50%))}
.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--accent)}
.slider input[type=range]:disabled{opacity:.4;cursor:not-allowed}
.slider .ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);padding:0 4px}