• welcome
  • faqs
  • principle
  • semantic
  • tokens
  • components
  • theming
  • typography
  • colors
  • utilities
  • badge
  • breadcrumb
  • button
  • calendar
  • cards
  • checkbox
  • input
  • list
  • message
  • pagination
  • panel
  • segments
  • selectbox
  • slider
  • switch
  • table
  • tabs
  • tag
  • form
  • grid
  • grid2
  • modal
  • toast
  • tooltip

    • Slider

    정해진 범위 내에서 사용자가 값을 조절할 수 있는 입력 컴포넌트

    fr-slider
    JS

    Base

     
<div class="ga-slider" >
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn"></div>
</div>

    Range

     
<div class="ga-slider range">
  <input name="start" type="range" hidden /> 
  <input name="end" type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn min"></div>
  <div class="control-btn max"></div>
</div>

    No handle

     
<div class="ga-slider no-handle">
  <input name="start" type="range" hidden /> 
  <input name="end" type="range" hidden />
  <div class="result-slider"></div>
</div>

    Clipper

     
<div class="ga-slider" >
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn"></div>
</div>

    Disabled

     
<div class="ga-slider disabled">
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn"></div>
</div>

    Show Label

    0
    100
     
<div class="ga-slider">
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn"></div>
  <div class="label-text">
    <div class="start-label">0</div>
    <div class="end-label">100</div>
  </div>
</div>

    Show Tooltip

    0
    100
     
<div class="ga-slider tooltip">
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn min"></div>
  <div class="control-btn max"></div>
</div>

    Show Result

    0
    100
     
<div class="ga-slider show-result">
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn"></div>
</div>

    Unit Text

    0%
    100%
     
<div class="ga-slider" data-unit="%">
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn show-result"></div>
</div>

    Steps

     
<div class="ga-slider" data-unit="%">
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn show-result"></div>
</div>

    Track Type

    Thin
    (Default)
    Fat
     
<!-- track type: thin | normal | fat -->
<div class="ga-slider {track type}">
  <input type="range" hidden></div>
  <div class="control-btn"></div>
</div>

    Colors

     
<!-- colors: red | orange | yellow ... -->
<div class="ga-slider {track type}">
  <input type="range" hidden /> 
  <div class="result-slider"></div>
  <div class="control-btn"></div>
</div>