Range slider tooltip

Inspect the full details and code of a selected snippet

(function (UIkit) {
  if (!UIkit) {
    throw new Error('UIkit not found. Make sure UIkit is loaded before this plugin.');
  }

UIkit.component('range', {
    connected() {
      this.initRange();
    },
    methods: {
      initRange() {
        this.$el.classList.add('uk-range');

let tooltip = document.createElement('span');
        tooltip.classList.add('uk-tooltip', 'uk-tooltip-active');
        tooltip.style.position = 'absolute';
        tooltip.style.transform = 'translateX(-50%)';
        tooltip.style.whiteSpace = 'nowrap';
        tooltip.style.zIndex = '1000';
        document.body.appendChild(tooltip);

const updateTooltip = () => {
          let rect = this.$el.getBoundingClientRect();
          let percent = (this.$el.value - this.$el.min) / (this.$el.max - this.$el.min);
          let left = rect.left + percent * (rect.width - 16) + 8;
          tooltip.textContent = this.$el.value;
          tooltip.style.top = rect.top - 30 + 'px';
          tooltip.style.left = left + 'px';
          tooltip.style.display = 'block';
        };

this.$el.addEventListener('input', updateTooltip);
        this.$el.addEventListener('mouseenter', updateTooltip);
        this.$el.addEventListener('mouseleave', () => (tooltip.style.display = 'none'));
      }
    }
  });
})(window.UIkit);

Information

Detailed overview of a selected code snippet

yaneony

20.03.2025, 14:47:07

28.03.2025, 11:01:12

uk-border, uk-card, uk-container, uk-flex, uk-margin, uk-padding, uk-range, uk-tooltip

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!