Range, Stepper, Colors

Range Slider, Stepper and Color Picker

A range slider wraps an <input type="range"> in <div class="range-slider range-slider-init"> and keeps the hidden input in step. data-label="true" shows the value while you drag; data-dual="true" gives two knobs.

A stepper is minus, value and plus, for quantities (defaults min: 0, max: 100, step: 1). The checkout uses data-min="0" data-max="5" with stepper-small stepper-round stepper-fill, and every change fires stepper:change.

A color picker has no HTML counterpart. It is created in code, attached to a read-only input, and assembled from 13 modules such as wheel (the default), sb-spectrum, rgb-sliders, hex and palette:

The highlight color picker, created in $onMounted in src/pages/note.f7

      picker = $f7.colorPicker.create({
        inputEl: $el.value.find('#note-color'),
        targetEl: $el.value.find('.highlight-swatch'),
        targetElSetBackgroundColor: true,
        modules: ['palette'],
        palette: [['#FFF59D', '#FFCC80', '#EF9A9A', '#CE93D8'],
                  ['#90CAF9', '#80CBC4', '#C5E1A5', '#E0E0E0']],
        openIn: 'popover',
        value: { hex: '#FFF59D' },
        formatValue: (value) => value.hex,
      });

The popover is panel A of the figure in Smart Select. The picker lives outside the template, so $onBeforeUnmount destroys it; otherwise each visit leaves another popover behind.

MENU