Method render

core/src/components/range/range.tsx:978–1058

()

  }

  render() {
    const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label, dualKnobs, min, max } = this;

    const inItem = hostContext('ion-item', el);

    /**
     * If there is no start content then the knob at
     * the min value will be cut off by the item margin.
     */
    const hasStartContent =
      (hasLabel && (labelPlacement === 'start' || labelPlacement === 'fixed')) || this.hasStartSlotContent;

    const needsStartAdjustment = inItem && !hasStartContent;

    /**
     * If there is no end content then the knob at
     * the max value will be cut off by the item margin.
     */
    const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;

    const needsEndAdjustment = inItem && !hasEndContent;

    const mode = getIonMode(this);

    /**
     * Determine the name and position of the pressed knob to apply
     * Host classes for styling.
     */
    const pressedKnobName = dualKnobs ? pressedKnob?.toLowerCase() : undefined;
    const pressedKnobPosition =
      dualKnobs && pressedKnob ? getKnobPosition(pressedKnob, this.ratioA, this.ratioB, dualKnobs) : undefined;

    /**
     * Determine if any knob is at the min or max value to
     * apply Host classes for styling.
     */
    const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
    const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;

    renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);

    return (
      <Host
        onFocusin={this.onFocus}
        onFocusout={this.onBlur}
        id={rangeId}
        class={createColorClasses(this.color, {
          [mode]: true,
          'in-item': inItem,
          'range-disabled': disabled,
          'range-dual-knobs': dualKnobs,
          'range-pressed': pressedKnob !== undefined,
          [`range-pressed-${pressedKnobName}`]: pressedKnob !== undefined && pressedKnobName !== undefined,
          [`range-pressed-${pressedKnobPosition}`]: pressedKnob !== undefined && pressedKnobPosition !== undefined,
          'range-has-pin': pin,
          [`range-label-placement-${labelPlacement}`]: true,
          'range-item-start-adjustment': needsStartAdjustment,
          'range-item-end-adjustment': needsEndAdjustment,