@sr3d4cs

Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?

Добрый вечер!

Я веду разработку мобильного приложения на Ionic 7 Framework + Angular.
На этапе разработки страницы, на которой требуется разместить поле с типом range, а над ним разместить ленту значений из диапазона данного поля.

Присылаю изображение с дизайна того, как это должно выглядеть:

YyoF6Ax.png

Кусок кода HTML-страницы с данным полем:

<ng-container *ngSwitchCase="'range'">
	<ion-grid fixed>
	  <ion-row class="range-labels">
		  <!-- Динамическое создание колонок для пинов -->
		  <ion-col *ngFor="let num of generateRange(field.minValue, field.maxValue); let i = index" [class.active]="rangeValues[field.name] === i">
			{{ num }}
		  </ion-col>
	  </ion-row>
	  <ion-row>
		<ion-range [formControlName]="field.name" [min]="field.minValue" [max]="field.maxValue" [ticks]="true" [snaps]="true" (ionChange)="onRangeChange($event, field.name)"></ion-range>
	  </ion-row>
	</ion-grid>
  </ng-container>


Адаптивная верстка сделана при помощи элементов ion-grid, ion-row, ion-col.
За основу я использовал UI-компонент ion-range и кастомизировал его под наш дизайн:

ion-range {
        --bar-height: 6px;
        --bar-border-radius: 4px;
        --knob-size: 6px;
        --knob-box-shadow: 0px 0px 0px 5px var(--dl-color-purple-main);
    }

    ion-range::part(tick), ion-range::part(tick-active) {
        width: 0;
        height: 0;
    }
    
    ion-range::part(knob) {
        background: white;
    }
    
    ion-range::part(bar) {
        background: var(--dl-color-gray-1);
    }
    
    ion-range::part(bar-active) {
        background: var(--dl-color-purple-main);
        border-radius: 4px 0 0 4px;
    }

    .range-labels ion-col {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .range-labels ion-col.active {
        color: var(--ion-color-primary);
        font-weight: bold;
    }


Выглядит это сейчас пример вот так:

adKuaTG.png

Можем заметить, что ползунок стоит не на уровне значения выше. А всё это потому что ширина ion-range некорректная для того, чтобы было ровно положение и не было никаких смещений.

wds9ymr.png

Контроль отступами для ion-range происходит с помощью стилей padding-inline-*. Мы его должны подобрать таким образом, чтобы линия начала отступа со стороны ion-range совпадала с центром первой колонки (значения из диапазона в линейке), грубо говоря половина от ширина каждой колнку в силу адаптивности. Проблема основная заключается в том что мы не знает какая ширина каждой колонки в линейке значений и она соответственно динамически меняется при масштабировании экрана в силу адаптивности. Поэтому реализация подсчёта отступов для ion-range мне кажется костыль в плане реализации.

Если есть корректное понимание, как лучше всего сделать, пожалуйста, дайте знать!
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы