Slider

기본 사용

• 사용 태그 : input[range]

  <input type="range" class="gn-slider" value="2" min="0" max="100" step="1">

크기

  <input type="range" class="gn-slider is-small" value="20" min="0" max="100" step="1">
  <input type="range" class="gn-slider is-normal" value="40" min="0" max="100" step="1">
  <input type="range" class="gn-slider is-medium" value="60" min="0" max="100" step="1">
  <input type="range" class="gn-slider is-large" value="80" min="0" max="100" step="1">

스타일

  <input type="range" class="gn-slider is-round" value="20" min="0" max="100" step="1">

색상

  <input type="range" class="gn-slider is-success" value="20" min="0" max="100" step="1">
  <input type="range" class="gn-slider is-warning" value="40" min="0" max="100" step="1">
  <input type="range" class="gn-slider is-danger" value="60" min="0" max="100" step="1">
  <input type="range" class="gn-slider is-info" value="80" min="0" max="100" step="1">

상태

  <input type="range" class="gn-slider" disabled value="20" min="0" max="100" step="1">
  <input type="range" class="gn-slider is-invalid" value="20" min="0" max="100" step="1">