2011.09.19 12:30

Range는 특정 범위 값을 입력할 때 사용하는 필드입니다. 역시나 Range 역시 입력 환경이 제한적인 모바일 환경에서 사용이 특히 유용합니다. 그래서인지 지금 우선 지원하는 브라우저들도 모바일 환경에 강한 브라우저 들입니다.
 Range의 사용방법은 아래와 같습니다.

<input id="test" type="range"/>

아래와 같이 사용했을 때 현재 지원하는 브라우저에서 보여지는 모습입니다.


현재 이 Range를 지원하는 웹 브라우저는 Chrome, Safari, Opera 등입니다.
Browsers Render Range input as Slider
IE 9
Firefox 4
Safari 5
Chrome 8
Opera 11

Range를 사용하기 위해서는 몇 가지 속성을 더 정확하게 써주는것이 좋습니다. 현재 값이나 최대 값, 최소 값 같은 것들입니다.

<input id="slider1" type="range" min="100" max="500" step="10" />

Attribute Descriptions
value Value is a common attribute of "Input" element. The value can be any valid floating point number, not neccessary must be an integer number. Default value is minimum value plus half of the maximum value.
min Minimum value of the range. Default minimum value is 0.
max Maximum value of the range. Default maximum value is 100.
step This is Step scale factor of the slider, default value is 1 and only allowing integer number unless minimum value is non integer number.
list List is the DataList in the past lesson. Datalist can be incorporated into Range type input, however, none of the browser has implemented this feature as of writing.

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고


티스토리 툴바