adverich-kun-ui/dist/components/KunSlider/src/composables/useSlider.js

Una librería de componentes Vue.js con Tailwind CSS

import { computed as u, watch as x } from "vue";
function g(e, l, V) {
  const m = u({
    get: () => e.range ? [...e.modelValue] : Number(e.modelValue),
    set: (t) => l("update:modelValue", e.range ? t : t[0])
  });
  x(
    () => [e.min, e.max, e.modelValue],
    () => {
      const t = Number(e.min), n = Number(e.max);
      if (e.range) {
        const a = e.modelValue.map((f) => Math.min(n, Math.max(t, f)));
        JSON.stringify(a) !== JSON.stringify(e.modelValue) && l("update:modelValue", a);
      } else {
        const a = Math.min(n, Math.max(t, e.modelValue));
        a !== e.modelValue && l("update:modelValue", a);
      }
    },
    { immediate: !0 }
  );
  const i = u(() => {
    const t = Number(e.min), n = Number(e.max), a = Number(e.step);
    return a > 0 ? Math.floor((n - t) / a) + 1 : 0;
  }), c = (t) => {
    const n = Number(e.min), a = Number(e.max);
    return (t - n) / (a - n) * 97;
  }, o = u(() => (e.range ? m.value : [m.value]).map((n) => ({
    [e.vertical ? "bottom" : "left"]: `${c(n)}%`
  }))), d = u(() => {
    const t = e.range ? m.value : [m.value], n = `${c(Math.min(...t))}%`, a = `${c(Math.max(...t))}%`;
    return e.vertical ? { bottom: n, top: `calc(100% - ${a})` } : { left: n, right: `calc(100% - ${a})` };
  });
  function r(t) {
    l("update:modelValue", t);
  }
  return {
    val: m,
    updateValue: r,
    thumbStyles: o,
    trackFillStyle: d,
    tickCount: i
  };
}
export {
  g as useSlider
};