Foundation 6 Slider Özelliği

  • Foundation 6’da slider tanımlanan değerler arasında belirli değer aralığı oluşturmamızı sağlar.
  • Foundation ile slider tanımlamamız için slider sınıfı oluşturmamızın yanı sıra data-slider özelliği de eklenmelidir.
  • slider-handle tutup, taşıdığımız slider değer çubuğunu ifade ederken, slider-fill ise slider çubuğunun başlangıçtan seçtiğimiz yere kadar olan değerini ifade eder.
  • Aşağıdaki örnekte slider çubuğu ve değerlerinin neyi ifade ettiği örneklerle açıklanmıştır.
<div class="slider" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
  • Slider çubuğu slider sınıfına disabled ekleyerek seçilmez ve tıklanamaz duruma getirebilirken, vertical eklenerek de dikey durama getirebilir.
<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
<div class="slider disabled" data-slider data-initial-start="78">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
  <input type="hidden">
  <input type="hidden">
</div>
204 Views
42140cookie-checkFoundation 6 Slider Özelliği

Leave a Reply

Your email address will not be published. Required fields are marked *