Skip to main content

Stepper (Лічильник значень)

Навігація

Stepper (Лічильник значень)

techno4 v2.0.4 Core Component MIT License GitHub Repository CO «CF TECHNO4»

Stepper — це компактний елемент інтерфейсу для дискретного збільшення або зменшення числових значень за допомогою кнопок «плюс» та «мінус».

HTML-розмітка Stepper 

<div class="stepper stepper-init" data-min="0" data-max="100" data-step="1" data-value="10">
  <div class="stepper-button-minus"></div>
  <div class="stepper-input-wrap">
    <input type="text" value="10" readonly />
  </div>
  <div class="stepper-button-plus"></div>
</div>

JavaScript API Stepper 

const stepper = app.stepper.create({
  el: '.stepper',
  min: 0,
  max: 50,
  step: 5,
  value: 20,
  on: {
    change: function (val) {
      console.log('Нове значення лічильника:', val);
    }
  }
});