CSS: range-input ​

.instui-range-input — 역방향 값 버블이 있는 스타일된 범위 슬라이더.

각 공급업체의 thumb/track 의사 요소는 별도의 규칙이 필요합니다 — 하나의 셀렉터 목록으로 묶으면 다른 공급업체의 의사 요소를 인식하지 못하는 브라우저에서 전체 규칙이 무효화됩니다.

Source: range-input.css

접근성 ​

이 컨트롤은 네이티브 <input type="range">입니다; aria-label이나 연관된 <label>로 접근 가능한 이름을 제공하세요.

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/range-input.css";

예제들 ​

html
<input class="instui-range-input" id="r1" type="range" value="30">

수정자 ​

수정자설명
.-size-large-size-lg의 장문 형태 별칭입니다.
.-size-small-size-sm의 장문 형태 별칭입니다.

의사 요소 ​

의사 요소설명
::before값 버블의 캐럿(트랙을 향하는 작은 삼각형)을 그립니다.

사용된 토큰 ​

Token타입값
--instui-border-radius-md<length>0.5rem
--instui-border-width-sm<length>0.0625rem
--instui-color-background-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-color-text-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-range-input-handle-background<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-range-input-handle-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-range-input-handle-border-size<length>0.125rem
--instui-component-range-input-handle-focus-background<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-range-input-handle-focus-outline-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-range-input-handle-focus-outline-width<length>0.75em
--instui-component-range-input-handle-hover-background<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-range-input-handle-shadow-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-range-input-handle-size<length>1.5rem
--instui-component-range-input-min-width<length>12.5rem
--instui-component-range-input-track-background<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-range-input-track-border-color<color>LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-range-input-value-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-range-input-value-font-weight<integer>400
--instui-component-range-input-value-large-font-size<length>1.25rem
--instui-component-range-input-value-large-line-height<length>3rem
--instui-component-range-input-value-large-padding<length>1rem
--instui-component-range-input-value-medium-font-size<length>1rem
--instui-component-range-input-value-medium-padding<length>0.75rem
--instui-component-range-input-value-small-font-size<length>0.875rem
--instui-component-range-input-value-small-line-height<length>1.75rem
--instui-component-range-input-value-small-padding<length>0.5rem

관련 항목 ​

  • number-input — 타이핑 방식 숫자 입력의 대응 요소.