ion-range.entry.js 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { r as registerInstance, c as createEvent, h, e as Host, f as getElement } from './index-527b9e34.js';
  5. import { f as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index-9a17db3d.js';
  6. import { l as isSafeNumber, j as clamp, e as debounceEvent, i as inheritAriaAttributes, d as renderHiddenInput } from './helpers-d94bc8ad.js';
  7. import { p as printIonWarning } from './index-cfd9c1f2.js';
  8. import { i as isRTL } from './dir-babeabeb.js';
  9. import { h as hostContext, c as createColorClasses } from './theme-01f3f29c.js';
  10. import { b as getIonMode } from './ionic-global-b26f573e.js';
  11. function getDecimalPlaces(n) {
  12. if (!isSafeNumber(n))
  13. return 0;
  14. if (n % 1 === 0)
  15. return 0;
  16. return n.toString().split('.')[1].length;
  17. }
  18. /**
  19. * Fixes floating point rounding errors in a result by rounding
  20. * to the same specificity, or number of decimal places (*not*
  21. * significant figures) as provided reference numbers. If multiple
  22. * references are provided, the highest number of decimal places
  23. * between them will be used.
  24. *
  25. * The main use case is when numbers x and y are added to produce n,
  26. * but x and y are floats, so n may have rounding errors (such as
  27. * 3.1000000004 instead of 3.1). As long as only addition/subtraction
  28. * occurs between x and y, the specificity of the result will never
  29. * increase, so x and y should be passed in as the references.
  30. *
  31. * If multiplication, division, or other operations were used to
  32. * calculate n, the rounded result may have less specificity than
  33. * desired. For example, 1 / 3 = 0.33333(...), but
  34. * roundToMaxDecimalPlaces((1 / 3), 1, 3) will return 0, since both
  35. * 1 and 3 are whole numbers.
  36. *
  37. * Note that extremely precise reference numbers may lead to rounding
  38. * errors not being trimmed, due to the error result having the same or
  39. * fewer decimal places as the reference(s). This is acceptable as we
  40. * would not be able to tell the difference between a rounding error
  41. * and correct value in this case, but it does mean there is an implicit
  42. * precision limit. If precision that high is needed, it is recommended
  43. * to use a third party data type designed to handle floating point
  44. * errors instead.
  45. *
  46. * @param n The number to round.
  47. * @param references Number(s) used to calculate n, or that should otherwise
  48. * be used as a reference for the desired specificity.
  49. */
  50. function roundToMaxDecimalPlaces(n, ...references) {
  51. if (!isSafeNumber(n))
  52. return 0;
  53. const maxPlaces = Math.max(...references.map((r) => getDecimalPlaces(r)));
  54. return Number(n.toFixed(maxPlaces));
  55. }
  56. const rangeIosCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}.range-knob-handle{inset-inline-start:0}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}.range-bar-container{inset-inline-start:0}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}::slotted([slot=label]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:0px}:host{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);--knob-size:26px;--bar-height:4px;--bar-background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:2px;--height:42px}:host(.range-item-start-adjustment){-webkit-padding-start:24px;padding-inline-start:24px}:host(.range-item-end-adjustment){-webkit-padding-end:24px;padding-inline-end:24px}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:calc(8px + 0.75rem)}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:calc(8px + 0.75rem)}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active.has-ticks{border-radius:0;-webkit-margin-start:-2px;margin-inline-start:-2px;-webkit-margin-end:-2px;margin-inline-end:-2px}.range-tick{-webkit-margin-start:-2px;margin-inline-start:-2px;border-radius:0;position:absolute;top:17px;width:4px;height:8px;background:var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));pointer-events:none}.range-tick-active{background:var(--bar-background-active)}.range-pin{-webkit-transform:translate3d(0, 100%, 0) scale(0.01);transform:translate3d(0, 100%, 0) scale(0.01);-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:8px;padding-bottom:8px;min-width:28px;-webkit-transition:-webkit-transform 120ms ease;transition:-webkit-transform 120ms ease;transition:transform 120ms ease;transition:transform 120ms ease, -webkit-transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:0.75rem;text-align:center}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, calc(-100% + 11px), 0) scale(1);transform:translate3d(0, calc(-100% + 11px), 0) scale(1)}:host(.range-disabled){opacity:0.3}";
  57. const IonRangeIosStyle0 = rangeIosCss;
  58. const rangeMdCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:-ms-flexbox;display:flex;position:relative;-ms-flex:3;flex:3;-ms-flex-align:center;align-items:center;font-family:var(--ion-font-family, inherit);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){-ms-flex:initial;flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:-webkit-grabbing;cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box}.range-knob-handle{top:calc((var(--height) - var(--knob-handle-size)) / 2);-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-pack:center;justify-content:center;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}.range-knob-handle{inset-inline-start:0}:host-context([dir=rtl]) .range-knob-handle{left:unset}[dir=rtl] .range-knob-handle{left:unset}@supports selector(:dir(rtl)){.range-knob-handle:dir(rtl){left:unset}}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar-container{border-radius:var(--bar-border-radius);top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height)}.range-bar-container{inset-inline-start:0}:host-context([dir=rtl]) .range-bar-container{left:unset}[dir=rtl] .range-bar-container{left:unset}@supports selector(:dir(rtl)){.range-bar-container:dir(rtl){left:unset}}.range-bar{border-radius:var(--bar-border-radius);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-knob{border-radius:var(--knob-border-radius);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}.range-knob{inset-inline-start:calc(50% - var(--knob-size) / 2)}:host-context([dir=rtl]) .range-knob{left:unset}[dir=rtl] .range-knob{left:unset}@supports selector(:dir(rtl)){.range-knob:dir(rtl){left:unset}}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host([slot=start]),:host([slot=end]){width:auto}:host(.in-item) ::slotted(ion-label){-ms-flex-item-align:center;align-self:center}.range-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit}::slotted([slot=label]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}:host(.range-label-placement-start) .range-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.range-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-end) .range-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.range-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}:host(.range-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.range-label-placement-stacked) .range-wrapper{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch}:host(.range-label-placement-stacked) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper,:host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.in-item.range-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.range-label-placement-stacked) .native-wrapper{margin-bottom:0px}:host{--knob-border-radius:50%;--knob-background:var(--bar-background-active);--knob-box-shadow:none;--knob-size:18px;--bar-height:2px;--bar-background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.26);--bar-background-active:var(--ion-color-primary, #0054e9);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #0054e9);--pin-color:var(--ion-color-primary-contrast, #fff)}::slotted(:not(ion-icon)[slot=start]),::slotted(:not(ion-icon)[slot=end]),.native-wrapper{font-size:0.75rem}:host(.range-item-start-adjustment){-webkit-padding-start:18px;padding-inline-start:18px}:host(.range-item-end-adjustment){-webkit-padding-end:18px;padding-inline-end:18px}:host(.ion-color) .range-bar{background:rgba(var(--ion-color-base-rgb), 0.26)}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-knob,:host(.ion-color) .range-knob::before,:host(.ion-color) .range-pin,:host(.ion-color) .range-pin::before,:host(.ion-color) .range-tick{background:var(--ion-color-base);color:var(--ion-color-contrast)}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px;margin-top:0;margin-bottom:0}::slotted([slot=end]){-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}:host(.range-has-pin:not(.range-label-placement-stacked)){padding-top:1.75rem}:host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper{margin-bottom:1.75rem}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-knob{-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease;z-index:2}.range-knob::before{border-radius:50%;position:absolute;width:var(--knob-size);height:var(--knob-size);-webkit-transform:scale(1);transform:scale(1);-webkit-transition:0.267s cubic-bezier(0, 0, 0.58, 1);transition:0.267s cubic-bezier(0, 0, 0.58, 1);background:var(--knob-background);content:\"\";opacity:0.13;pointer-events:none}.range-knob::before{inset-inline-start:0}.range-tick{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick-active{background:transparent}.range-pin{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;border-radius:50%;-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.75rem;height:1.75rem;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color)}.range-pin::before{bottom:-1px;-webkit-margin-start:-13px;margin-inline-start:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}.range-pin::before{inset-inline-start:50%}:host-context([dir=rtl]) .range-pin::before{left:unset}[dir=rtl] .range-pin::before{left:unset}@supports selector(:dir(rtl)){.range-pin::before:dir(rtl){left:unset}}.range-knob-pressed .range-pin,.range-knob-handle.ion-focused .range-pin{-webkit-transform:translate3d(0, calc(-100% + 4px), 0) scale(1);transform:translate3d(0, calc(-100% + 4px), 0) scale(1)}@media (any-hover: hover){.range-knob-handle:hover .range-knob:before{-webkit-transform:scale(2);transform:scale(2);opacity:0.13}}.range-knob-handle.ion-activated .range-knob:before,.range-knob-handle.ion-focused .range-knob:before,.range-knob-handle.range-knob-pressed .range-knob:before{-webkit-transform:scale(2);transform:scale(2)}.range-knob-handle.ion-focused .range-knob::before{opacity:0.13}.range-knob-handle.ion-activated .range-knob::before,.range-knob-handle.range-knob-pressed .range-knob::before{opacity:0.25}:host(:not(.range-has-pin)) .range-knob-pressed .range-knob,:host(:not(.range-has-pin)) .range-knob-handle.ion-focused .range-knob{-webkit-transform:scale(1);transform:scale(1)}:host(.range-disabled) .range-bar-active,:host(.range-disabled) .range-bar,:host(.range-disabled) .range-tick{background-color:var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf))}:host(.range-disabled) .range-knob{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:var(--ion-color-step-250, var(--ion-background-color-step-250, #bfbfbf))}:host(.range-disabled) .label-text-wrapper,:host(.range-disabled) ::slotted([slot=start]),:host(.range-disabled) ::slotted([slot=end]){opacity:0.38}";
  59. const IonRangeMdStyle0 = rangeMdCss;
  60. const Range = class {
  61. constructor(hostRef) {
  62. registerInstance(this, hostRef);
  63. this.ionChange = createEvent(this, "ionChange", 7);
  64. this.ionInput = createEvent(this, "ionInput", 7);
  65. this.ionFocus = createEvent(this, "ionFocus", 7);
  66. this.ionBlur = createEvent(this, "ionBlur", 7);
  67. this.ionKnobMoveStart = createEvent(this, "ionKnobMoveStart", 7);
  68. this.ionKnobMoveEnd = createEvent(this, "ionKnobMoveEnd", 7);
  69. this.rangeId = `ion-r-${rangeIds++}`;
  70. this.didLoad = false;
  71. this.noUpdate = false;
  72. this.hasFocus = false;
  73. this.inheritedAttributes = {};
  74. this.contentEl = null;
  75. this.initialContentScrollY = true;
  76. /**
  77. * Compares two RangeValue inputs to determine if they are different.
  78. *
  79. * @param newVal - The new value.
  80. * @param oldVal - The old value.
  81. * @returns `true` if the values are different, `false` otherwise.
  82. */
  83. this.compareValues = (newVal, oldVal) => {
  84. if (typeof newVal === 'object' && typeof oldVal === 'object') {
  85. return newVal.lower !== oldVal.lower || newVal.upper !== oldVal.upper;
  86. }
  87. return newVal !== oldVal;
  88. };
  89. this.clampBounds = (value) => {
  90. return clamp(this.min, value, this.max);
  91. };
  92. this.ensureValueInBounds = (value) => {
  93. if (this.dualKnobs) {
  94. return {
  95. lower: this.clampBounds(value.lower),
  96. upper: this.clampBounds(value.upper),
  97. };
  98. }
  99. else {
  100. return this.clampBounds(value);
  101. }
  102. };
  103. this.setupGesture = async () => {
  104. const rangeSlider = this.rangeSlider;
  105. if (rangeSlider) {
  106. this.gesture = (await import('./index-39782642.js')).createGesture({
  107. el: rangeSlider,
  108. gestureName: 'range',
  109. gesturePriority: 100,
  110. /**
  111. * Provide a threshold since the drag movement
  112. * might be a user scrolling the view.
  113. * If this is true, then the range
  114. * should not move.
  115. */
  116. threshold: 10,
  117. onStart: () => this.onStart(),
  118. onMove: (ev) => this.onMove(ev),
  119. onEnd: (ev) => this.onEnd(ev),
  120. });
  121. this.gesture.enable(!this.disabled);
  122. }
  123. };
  124. this.handleKeyboard = (knob, isIncrease) => {
  125. const { ensureValueInBounds } = this;
  126. let step = this.step;
  127. step = step > 0 ? step : 1;
  128. step = step / (this.max - this.min);
  129. if (!isIncrease) {
  130. step *= -1;
  131. }
  132. if (knob === 'A') {
  133. this.ratioA = clamp(0, this.ratioA + step, 1);
  134. }
  135. else {
  136. this.ratioB = clamp(0, this.ratioB + step, 1);
  137. }
  138. this.ionKnobMoveStart.emit({ value: ensureValueInBounds(this.value) });
  139. this.updateValue();
  140. this.emitValueChange();
  141. this.ionKnobMoveEnd.emit({ value: ensureValueInBounds(this.value) });
  142. };
  143. this.onBlur = () => {
  144. if (this.hasFocus) {
  145. this.hasFocus = false;
  146. this.ionBlur.emit();
  147. }
  148. };
  149. this.onFocus = () => {
  150. if (!this.hasFocus) {
  151. this.hasFocus = true;
  152. this.ionFocus.emit();
  153. }
  154. };
  155. this.ratioA = 0;
  156. this.ratioB = 0;
  157. this.pressedKnob = undefined;
  158. this.color = undefined;
  159. this.debounce = undefined;
  160. this.name = this.rangeId;
  161. this.label = undefined;
  162. this.dualKnobs = false;
  163. this.min = 0;
  164. this.max = 100;
  165. this.pin = false;
  166. this.pinFormatter = (value) => Math.round(value);
  167. this.snaps = false;
  168. this.step = 1;
  169. this.ticks = true;
  170. this.activeBarStart = undefined;
  171. this.disabled = false;
  172. this.value = 0;
  173. this.labelPlacement = 'start';
  174. }
  175. debounceChanged() {
  176. const { ionInput, debounce, originalIonInput } = this;
  177. /**
  178. * If debounce is undefined, we have to manually revert the ionInput emitter in case
  179. * debounce used to be set to a number. Otherwise, the event would stay debounced.
  180. */
  181. this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
  182. }
  183. minChanged(newValue) {
  184. if (!isSafeNumber(newValue)) {
  185. this.min = 0;
  186. }
  187. if (!this.noUpdate) {
  188. this.updateRatio();
  189. }
  190. }
  191. maxChanged(newValue) {
  192. if (!isSafeNumber(newValue)) {
  193. this.max = 100;
  194. }
  195. if (!this.noUpdate) {
  196. this.updateRatio();
  197. }
  198. }
  199. stepChanged(newValue) {
  200. if (!isSafeNumber(newValue)) {
  201. this.step = 1;
  202. }
  203. }
  204. activeBarStartChanged() {
  205. const { activeBarStart } = this;
  206. if (activeBarStart !== undefined) {
  207. if (activeBarStart > this.max) {
  208. printIonWarning(`[ion-range] - The value of activeBarStart (${activeBarStart}) is greater than the max (${this.max}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
  209. this.activeBarStart = this.max;
  210. }
  211. else if (activeBarStart < this.min) {
  212. printIonWarning(`[ion-range] - The value of activeBarStart (${activeBarStart}) is less than the min (${this.min}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
  213. this.activeBarStart = this.min;
  214. }
  215. }
  216. }
  217. disabledChanged() {
  218. if (this.gesture) {
  219. this.gesture.enable(!this.disabled);
  220. }
  221. }
  222. valueChanged(newValue, oldValue) {
  223. const valuesChanged = this.compareValues(newValue, oldValue);
  224. if (valuesChanged) {
  225. this.ionInput.emit({ value: this.value });
  226. }
  227. if (!this.noUpdate) {
  228. this.updateRatio();
  229. }
  230. }
  231. componentWillLoad() {
  232. /**
  233. * If user has custom ID set then we should
  234. * not assign the default incrementing ID.
  235. */
  236. if (this.el.hasAttribute('id')) {
  237. this.rangeId = this.el.getAttribute('id');
  238. }
  239. this.inheritedAttributes = inheritAriaAttributes(this.el);
  240. // If min, max, or step are not safe, set them to 0, 100, and 1, respectively.
  241. // Each watch does this, but not before the initial load.
  242. this.min = isSafeNumber(this.min) ? this.min : 0;
  243. this.max = isSafeNumber(this.max) ? this.max : 100;
  244. this.step = isSafeNumber(this.step) ? this.step : 1;
  245. }
  246. componentDidLoad() {
  247. this.originalIonInput = this.ionInput;
  248. this.setupGesture();
  249. this.updateRatio();
  250. this.didLoad = true;
  251. }
  252. connectedCallback() {
  253. var _a;
  254. this.updateRatio();
  255. this.debounceChanged();
  256. this.disabledChanged();
  257. this.activeBarStartChanged();
  258. /**
  259. * If we have not yet rendered
  260. * ion-range, then rangeSlider is not defined.
  261. * But if we are moving ion-range via appendChild,
  262. * then rangeSlider will be defined.
  263. */
  264. if (this.didLoad) {
  265. this.setupGesture();
  266. }
  267. const ionContent = findClosestIonContent(this.el);
  268. this.contentEl = (_a = ionContent === null || ionContent === void 0 ? void 0 : ionContent.querySelector('.ion-content-scroll-host')) !== null && _a !== void 0 ? _a : ionContent;
  269. }
  270. disconnectedCallback() {
  271. if (this.gesture) {
  272. this.gesture.destroy();
  273. this.gesture = undefined;
  274. }
  275. }
  276. getValue() {
  277. var _a;
  278. const value = (_a = this.value) !== null && _a !== void 0 ? _a : 0;
  279. if (this.dualKnobs) {
  280. if (typeof value === 'object') {
  281. return value;
  282. }
  283. return {
  284. lower: 0,
  285. upper: value,
  286. };
  287. }
  288. else {
  289. if (typeof value === 'object') {
  290. return value.upper;
  291. }
  292. return value;
  293. }
  294. }
  295. /**
  296. * Emits an `ionChange` event.
  297. *
  298. * This API should be called for user committed changes.
  299. * This API should not be used for external value changes.
  300. */
  301. emitValueChange() {
  302. this.value = this.ensureValueInBounds(this.value);
  303. this.ionChange.emit({ value: this.value });
  304. }
  305. /**
  306. * The value should be updated on touch end or
  307. * when the component is being dragged.
  308. * This follows the native behavior of mobile devices.
  309. *
  310. * For example: When the user lifts their finger from the
  311. * screen after tapping the bar or dragging the bar or knob.
  312. */
  313. onStart() {
  314. this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
  315. }
  316. /**
  317. * The value should be updated while dragging the
  318. * bar or knob.
  319. *
  320. * While the user is dragging, the view
  321. * should not scroll. This is to prevent the user from
  322. * feeling disoriented while dragging.
  323. *
  324. * The user can scroll on the view if the knob or
  325. * bar is not being dragged.
  326. *
  327. * @param detail The details of the gesture event.
  328. */
  329. onMove(detail) {
  330. const { contentEl, pressedKnob } = this;
  331. const currentX = detail.currentX;
  332. /**
  333. * Since the user is dragging on the bar or knob, the view should not scroll.
  334. *
  335. * This only needs to be done once.
  336. */
  337. if (contentEl && this.pressedKnob === undefined) {
  338. this.initialContentScrollY = disableContentScrollY(contentEl);
  339. }
  340. /**
  341. * The `pressedKnob` can be undefined if the user just
  342. * started dragging the knob.
  343. *
  344. * This is necessary to determine which knob the user is dragging,
  345. * especially when it's a dual knob.
  346. * Plus, it determines when to apply certain styles.
  347. *
  348. * This only needs to be done once since the knob won't change
  349. * while the user is dragging.
  350. */
  351. if (pressedKnob === undefined) {
  352. this.setPressedKnob(currentX);
  353. }
  354. this.update(currentX);
  355. }
  356. /**
  357. * The value should be updated on touch end:
  358. * - When the user lifts their finger from the screen after
  359. * tapping the bar.
  360. *
  361. * @param detail The details of the gesture or mouse event.
  362. */
  363. onEnd(detail) {
  364. var _a;
  365. const { contentEl, initialContentScrollY } = this;
  366. const currentX = (_a = detail.currentX) !== null && _a !== void 0 ? _a : detail.clientX;
  367. /**
  368. * The `pressedKnob` can be undefined if the user never
  369. * dragged the knob. They just tapped on the bar.
  370. *
  371. * This is necessary to determine which knob the user is changing,
  372. * especially when it's a dual knob.
  373. * Plus, it determines when to apply certain styles.
  374. */
  375. if (this.pressedKnob === undefined) {
  376. this.setPressedKnob(currentX);
  377. }
  378. /**
  379. * The user is no longer dragging the bar or
  380. * knob (if they were dragging it).
  381. *
  382. * The user can now scroll on the view in the next gesture event.
  383. */
  384. if (contentEl && this.pressedKnob !== undefined) {
  385. resetContentScrollY(contentEl, initialContentScrollY);
  386. }
  387. // update the active knob's position
  388. this.update(currentX);
  389. /**
  390. * Reset the pressed knob to undefined since the user
  391. * may start dragging a different knob in the next gesture event.
  392. */
  393. this.pressedKnob = undefined;
  394. this.emitValueChange();
  395. this.ionKnobMoveEnd.emit({ value: this.ensureValueInBounds(this.value) });
  396. }
  397. update(currentX) {
  398. // figure out where the pointer is currently at
  399. // update the knob being interacted with
  400. const rect = this.rect;
  401. let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
  402. if (isRTL(this.el)) {
  403. ratio = 1 - ratio;
  404. }
  405. if (this.snaps) {
  406. // snaps the ratio to the current value
  407. ratio = valueToRatio(ratioToValue(ratio, this.min, this.max, this.step), this.min, this.max);
  408. }
  409. // update which knob is pressed
  410. if (this.pressedKnob === 'A') {
  411. this.ratioA = ratio;
  412. }
  413. else {
  414. this.ratioB = ratio;
  415. }
  416. // Update input value
  417. this.updateValue();
  418. }
  419. setPressedKnob(currentX) {
  420. const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
  421. // figure out which knob they started closer to
  422. let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
  423. if (isRTL(this.el)) {
  424. ratio = 1 - ratio;
  425. }
  426. this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
  427. this.setFocus(this.pressedKnob);
  428. }
  429. get valA() {
  430. return ratioToValue(this.ratioA, this.min, this.max, this.step);
  431. }
  432. get valB() {
  433. return ratioToValue(this.ratioB, this.min, this.max, this.step);
  434. }
  435. get ratioLower() {
  436. if (this.dualKnobs) {
  437. return Math.min(this.ratioA, this.ratioB);
  438. }
  439. const { activeBarStart } = this;
  440. if (activeBarStart == null) {
  441. return 0;
  442. }
  443. return valueToRatio(activeBarStart, this.min, this.max);
  444. }
  445. get ratioUpper() {
  446. if (this.dualKnobs) {
  447. return Math.max(this.ratioA, this.ratioB);
  448. }
  449. return this.ratioA;
  450. }
  451. updateRatio() {
  452. const value = this.getValue();
  453. const { min, max } = this;
  454. if (this.dualKnobs) {
  455. this.ratioA = valueToRatio(value.lower, min, max);
  456. this.ratioB = valueToRatio(value.upper, min, max);
  457. }
  458. else {
  459. this.ratioA = valueToRatio(value, min, max);
  460. }
  461. }
  462. updateValue() {
  463. this.noUpdate = true;
  464. const { valA, valB } = this;
  465. this.value = !this.dualKnobs
  466. ? valA
  467. : {
  468. lower: Math.min(valA, valB),
  469. upper: Math.max(valA, valB),
  470. };
  471. this.noUpdate = false;
  472. }
  473. setFocus(knob) {
  474. if (this.el.shadowRoot) {
  475. const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b');
  476. if (knobEl) {
  477. knobEl.focus();
  478. }
  479. }
  480. }
  481. /**
  482. * Returns true if content was passed to the "start" slot
  483. */
  484. get hasStartSlotContent() {
  485. return this.el.querySelector('[slot="start"]') !== null;
  486. }
  487. /**
  488. * Returns true if content was passed to the "end" slot
  489. */
  490. get hasEndSlotContent() {
  491. return this.el.querySelector('[slot="end"]') !== null;
  492. }
  493. get hasLabel() {
  494. return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null;
  495. }
  496. renderRangeSlider() {
  497. var _a;
  498. const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
  499. let barStart = `${ratioLower * 100}%`;
  500. let barEnd = `${100 - ratioUpper * 100}%`;
  501. const rtl = isRTL(this.el);
  502. const start = rtl ? 'right' : 'left';
  503. const end = rtl ? 'left' : 'right';
  504. const tickStyle = (tick) => {
  505. return {
  506. [start]: tick[start],
  507. };
  508. };
  509. if (this.dualKnobs === false) {
  510. /**
  511. * When the value is less than the activeBarStart or the min value,
  512. * the knob will display at the start of the active bar.
  513. */
  514. if (this.valA < ((_a = this.activeBarStart) !== null && _a !== void 0 ? _a : this.min)) {
  515. /**
  516. * Sets the bar positions relative to the upper and lower limits.
  517. * Converts the ratio values into percentages, used as offsets for left/right styles.
  518. *
  519. * The ratioUpper refers to the knob position on the bar.
  520. * The ratioLower refers to the end position of the active bar (the value).
  521. */
  522. barStart = `${ratioUpper * 100}%`;
  523. barEnd = `${100 - ratioLower * 100}%`;
  524. }
  525. else {
  526. /**
  527. * Otherwise, the knob will display at the end of the active bar.
  528. *
  529. * The ratioLower refers to the start position of the active bar (the value).
  530. * The ratioUpper refers to the knob position on the bar.
  531. */
  532. barStart = `${ratioLower * 100}%`;
  533. barEnd = `${100 - ratioUpper * 100}%`;
  534. }
  535. }
  536. const barStyle = {
  537. [start]: barStart,
  538. [end]: barEnd,
  539. };
  540. const ticks = [];
  541. if (this.snaps && this.ticks) {
  542. for (let value = min; value <= max; value += step) {
  543. const ratio = valueToRatio(value, min, max);
  544. const ratioMin = Math.min(ratioLower, ratioUpper);
  545. const ratioMax = Math.max(ratioLower, ratioUpper);
  546. const tick = {
  547. ratio,
  548. /**
  549. * Sets the tick mark as active when the tick is between the min bounds and the knob.
  550. * When using activeBarStart, the tick mark will be active between the knob and activeBarStart.
  551. */
  552. active: ratio >= ratioMin && ratio <= ratioMax,
  553. };
  554. tick[start] = `${ratio * 100}%`;
  555. ticks.push(tick);
  556. }
  557. }
  558. return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
  559. /**
  560. * Since the gesture has a threshold, the value
  561. * won't change until the user has dragged past
  562. * the threshold. This is to prevent the range
  563. * from moving when the user is scrolling.
  564. *
  565. * This results in the value not being updated
  566. * and the event emitters not being triggered
  567. * if the user taps on the range. This is why
  568. * we need to listen for the "pointerUp" event.
  569. */
  570. onPointerUp: (ev) => {
  571. /**
  572. * If the user drags the knob on the web
  573. * version (does not occur on mobile),
  574. * the "pointerUp" event will be triggered
  575. * along with the gesture's events.
  576. * This leads to duplicate events.
  577. *
  578. * By checking if the pressedKnob is undefined,
  579. * we can determine if the "pointerUp" event was
  580. * triggered by a tap or a drag. If it was
  581. * dragged, the pressedKnob will be defined.
  582. */
  583. if (this.pressedKnob === undefined) {
  584. this.onStart();
  585. this.onEnd(ev);
  586. }
  587. } }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
  588. 'range-tick': true,
  589. 'range-tick-active': tick.active,
  590. }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar-container" }, h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: {
  591. 'range-bar': true,
  592. 'range-bar-active': true,
  593. 'has-ticks': ticks.length > 0,
  594. }, role: "presentation", style: barStyle, part: "bar-active" })), renderKnob(rtl, {
  595. knob: 'A',
  596. pressed: pressedKnob === 'A',
  597. value: this.valA,
  598. ratio: this.ratioA,
  599. pin,
  600. pinFormatter,
  601. disabled,
  602. handleKeyboard,
  603. min,
  604. max,
  605. inheritedAttributes,
  606. }), this.dualKnobs &&
  607. renderKnob(rtl, {
  608. knob: 'B',
  609. pressed: pressedKnob === 'B',
  610. value: this.valB,
  611. ratio: this.ratioB,
  612. pin,
  613. pinFormatter,
  614. disabled,
  615. handleKeyboard,
  616. min,
  617. max,
  618. inheritedAttributes,
  619. })));
  620. }
  621. render() {
  622. const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
  623. const inItem = hostContext('ion-item', el);
  624. /**
  625. * If there is no start content then the knob at
  626. * the min value will be cut off by the item margin.
  627. */
  628. const hasStartContent = (hasLabel && (labelPlacement === 'start' || labelPlacement === 'fixed')) || this.hasStartSlotContent;
  629. const needsStartAdjustment = inItem && !hasStartContent;
  630. /**
  631. * If there is no end content then the knob at
  632. * the max value will be cut off by the item margin.
  633. */
  634. const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
  635. const needsEndAdjustment = inItem && !hasEndContent;
  636. const mode = getIonMode(this);
  637. renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
  638. return (h(Host, { key: '3e065039ee048f1f70d97dba5dae98fa1315d867', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
  639. [mode]: true,
  640. 'in-item': inItem,
  641. 'range-disabled': disabled,
  642. 'range-pressed': pressedKnob !== undefined,
  643. 'range-has-pin': pin,
  644. [`range-label-placement-${labelPlacement}`]: true,
  645. 'range-item-start-adjustment': needsStartAdjustment,
  646. 'range-item-end-adjustment': needsEndAdjustment,
  647. }) }, h("label", { key: '27ff22842c9ea79a1b9495302b926f70c9080a95', class: "range-wrapper", id: "range-label" }, h("div", { key: 'da1f9784be02dfe87d2fef34931d8b7f2148189e', class: {
  648. 'label-text-wrapper': true,
  649. 'label-text-wrapper-hidden': !hasLabel,
  650. }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '4389bf30b08214f5b5917fc30976b38f7bcdd29b', class: "native-wrapper" }, h("slot", { key: 'ad1b2745f8b061ee189617bb5c567e4f1d02250c', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'c6dec9e843e232af2a5f16a0f8ee56439c545d7a', name: "end" })))));
  651. }
  652. get el() { return getElement(this); }
  653. static get watchers() { return {
  654. "debounce": ["debounceChanged"],
  655. "min": ["minChanged"],
  656. "max": ["maxChanged"],
  657. "step": ["stepChanged"],
  658. "activeBarStart": ["activeBarStartChanged"],
  659. "disabled": ["disabledChanged"],
  660. "value": ["valueChanged"]
  661. }; }
  662. };
  663. const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes }) => {
  664. const start = rtl ? 'right' : 'left';
  665. const knobStyle = () => {
  666. const style = {};
  667. style[start] = `${ratio * 100}%`;
  668. return style;
  669. };
  670. // The aria label should be preferred over visible text if both are specified
  671. const ariaLabel = inheritedAttributes['aria-label'];
  672. return (h("div", { onKeyDown: (ev) => {
  673. const key = ev.key;
  674. if (key === 'ArrowLeft' || key === 'ArrowDown') {
  675. handleKeyboard(knob, false);
  676. ev.preventDefault();
  677. ev.stopPropagation();
  678. }
  679. else if (key === 'ArrowRight' || key === 'ArrowUp') {
  680. handleKeyboard(knob, true);
  681. ev.preventDefault();
  682. ev.stopPropagation();
  683. }
  684. }, class: {
  685. 'range-knob-handle': true,
  686. 'range-knob-a': knob === 'A',
  687. 'range-knob-b': knob === 'B',
  688. 'range-knob-pressed': pressed,
  689. 'range-knob-min': value === min,
  690. 'range-knob-max': value === max,
  691. 'ion-activatable': true,
  692. 'ion-focusable': true,
  693. }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
  694. };
  695. const ratioToValue = (ratio, min, max, step) => {
  696. let value = (max - min) * ratio;
  697. if (step > 0) {
  698. // round to nearest multiple of step, then add min
  699. value = Math.round(value / step) * step + min;
  700. }
  701. const clampedValue = clamp(min, value, max);
  702. return roundToMaxDecimalPlaces(clampedValue, min, max, step);
  703. };
  704. const valueToRatio = (value, min, max) => {
  705. return clamp(0, (value - min) / (max - min), 1);
  706. };
  707. let rangeIds = 0;
  708. Range.style = {
  709. ios: IonRangeIosStyle0,
  710. md: IonRangeMdStyle0
  711. };
  712. export { Range as ion_range };