Для настройки динамического масштабирования элемента ion-range в соответствии с шириной столбцов содержащих значения, можно использовать CSS свойство `--thumb-width`. Например, если у вас есть установленные столбцы с определенной шириной, можно задать соответствующую ширину для ползунка элемента `ion-range`, чтобы он соответствовал этой ширине. Для этого нужно определить значение этого свойства в CSS:
```css
.range-slider {
--thumb-width: XXpx; /* заменить XX на значение ширины столбца */
}
```
После этого, примените класс `range-slider` к вашему элементу `ion-range`.
Для создания страницы с полем типа range и лентой значений из диапазона можно использовать следующий код в шаблоне Angular компонента:
```html
<ion-range dualKnobs="true" pin="true" min="0" max="100" step="1" snaps="true"></ion-range>
```
Этот код создаст элемент `ion-range` с двумя ползунками, метками значений, минимальным значением 0, максимальным 100 и шагом 1. Опция `snaps="true"` сделает так, что ползунок будет присыпаться к определенным значениям диапазона.
Для стилизации ленты значений похожей на изображение с дизайном, можно использовать CSS для элементов `ion-range` и его потомков, например, для ползунков можно использовать:
```css
.range-knob {
background-color: #007bff; /* задать цвет ползунков */
border: 2px solid #007bff; /* задать стиль границы ползунков */
}
```
Также можно использовать CSS для создания стилей для ленты значений и других элементов, чтобы придать им соответствующий вид.
Надеюсь, это поможет вам настроить ваш элемент `ion-range` и создать страницу с нужным дизайном.