סליידר נמתח

למחשבוני מחיר, תקציב או כמות שאנשים אוהבים לשחק בהם. בזמן הגרירה הערך הוא בדיוק מיקום הסמן, ומעבר לקצה המסילה נמתחת קצת וחוזרת בשחרור. הבועה תמיד במרכז הידית, המינימום בצד ימין כמו בכל סליידר עברי, ויש role="slider" עם חצים, Home ו-End. סליידר נמתח הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בטפסים, מחשבון, מיקרו-אינטראקציה ובלי ספריות. באותה סדרה יש גם שאלות נפוצות, ציר תהליך וקרוסלת המלצות.

רכיב · טפסים · מחשבון · מיקרו-אינטראקציה · בלי ספריות

<!-- סליידר נמתח: data-min, data-max, data-value, data-suffix.
     כל שינוי יורה אירוע klix-value על האלמנט עם detail.value -->
<style>
.klix-sslider{--p:0;width:100%;max-width:26rem;padding:2.6rem .9rem .6rem;touch-action:none;user-select:none}
.klix-sslider-track{position:relative;height:.6rem;border-radius:999px;background:#334155;
  transition:transform .5s cubic-bezier(.34,1.45,.64,1)}
.klix-sslider.is-drag .klix-sslider-track{transition:none}
.klix-sslider-fill{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p) * 100%);
  border-radius:inherit;background:#6366f1}
.klix-sslider-knob{position:absolute;top:50%;inset-inline-start:calc(var(--p) * 100%);width:1.5rem;height:1.5rem;
  margin-inline-start:-.75rem;margin-top:-.75rem;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);
  cursor:grab;outline:none}
.klix-sslider-knob:focus-visible{box-shadow:0 0 0 4px rgba(99,102,241,.5)}
.klix-sslider-bubble{position:absolute;bottom:calc(100% + .5rem);left:50%;transform:translateX(-50%);padding:.2rem .55rem;
  border-radius:.5rem;background:#6366f1;color:#fff;font-weight:800;font-size:.85rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
html[data-motion="off"] .klix-sslider-track{transition:none}
</style>

<div class="klix-sslider" data-min="0" data-max="100" data-value="40" data-suffix="%">
  <div class="klix-sslider-track">
    <div class="klix-sslider-fill"></div>
    <div class="klix-sslider-knob" role="slider" tabindex="0" aria-label="אחוז הנחה"><span class="klix-sslider-bubble"></span></div>
  </div>
</div>

<script>
(function () {
  document.querySelectorAll('.klix-sslider').forEach(function (box) {
    var track = box.querySelector('.klix-sslider-track');
    var knob = box.querySelector('.klix-sslider-knob');
    var bubble = box.querySelector('.klix-sslider-bubble');
    var min = Number(box.getAttribute('data-min') || 0);
    var max = Number(box.getAttribute('data-max') || 100);
    var suffix = box.getAttribute('data-suffix') || '';
    var value = Number(box.getAttribute('data-value') || min);

    knob.setAttribute('aria-valuemin', min);
    knob.setAttribute('aria-valuemax', max);

    function set(v) {
      value = Math.min(max, Math.max(min, Math.round(v)));
      box.style.setProperty('--p', (value - min) / (max - min));
      bubble.textContent = value + suffix;
      knob.setAttribute('aria-valuenow', value);
      knob.setAttribute('aria-valuetext', value + suffix);
      box.dispatchEvent(new CustomEvent('klix-value', { detail: { value: value } }));
    }

    function rtl() { return getComputedStyle(box).direction === 'rtl'; }

    function fromPointer(x) {
      var r = track.getBoundingClientRect();
      // בימין-לשמאל המינימום בצד ימין
      var raw = rtl() ? (r.right - x) / r.width : (x - r.left) / r.width;
      set(min + Math.min(Math.max(raw, 0), 1) * (max - min));
      var over = raw > 1 ? (raw - 1) * r.width : raw < 0 ? -raw * r.width : 0;
      if (!over) { track.style.transform = ''; return; }
      // המסילה נמתחת לכיוון המשיכה, עד 6 אחוזים
      var pullsRight = rtl() ? raw < 0 : raw > 1;
      track.style.transformOrigin = pullsRight ? 'left' : 'right';
      track.style.transform = 'scaleX(' + (1 + Math.min(over * 0.0016, 0.06)) + ')';
    }

    var dragging = false;
    box.addEventListener('pointerdown', function (e) {
      dragging = true;
      box.classList.add('is-drag');
      box.setPointerCapture(e.pointerId);
      fromPointer(e.clientX);
      knob.focus();
    });
    box.addEventListener('pointermove', function (e) { if (dragging) fromPointer(e.clientX); });
    function release() {
      if (!dragging) return;
      dragging = false;
      box.classList.remove('is-drag');
      track.style.transform = ''; // קופץ חזרה עם העקיפה של ה-transition
    }
    box.addEventListener('pointerup', release);
    box.addEventListener('pointercancel', release);

    knob.addEventListener('keydown', function (e) {
      var up = rtl() ? 'ArrowLeft' : 'ArrowRight', down = rtl() ? 'ArrowRight' : 'ArrowLeft';
      if (e.key === 'ArrowUp' || e.key === up) set(value + 1);
      else if (e.key === 'ArrowDown' || e.key === down) set(value - 1);
      else if (e.key === 'Home') set(min);
      else if (e.key === 'End') set(max);
      else return;
      e.preventDefault();
    });

    set(value);
  });
})();
</script>

כליקס לא הצליח להיטען

נסו קודם לרענן את העמוד. אם בדיוק עלתה גרסה חדשה, רענון פותר את זה מיד.

אם הרענון לא עזר, ייתכן שהדפדפן ישן מדי: כליקס מריץ את הכלים על המכשיר שלכם ולא בשרת, ולכן הוא זקוק לדפדפן מ-2022 ומעלה. מה עושים: לעדכן את Chrome או את Firefox, ולפתוח שוב את klixtools.com.

רענון העמוד