如何在Capacitor 4中创建垂直ion-range组件？

以下是两种适配Capacitor 4环境的可行方案：

方法一：CSS旋转快速实现 #

这是最简便的实现方式，通过旋转组件快速切换为垂直布局：

1. 给ion-range添加自定义类名：

<ion-range class="vertical-range" (ionChange)="onIonChange($event)"></ion-range>
<ion-label>ionChange emitted value: {{ lastEmittedValue }}</ion-label>

2. 添加对应CSS样式：

.vertical-range {
  /* 逆时针旋转90度，转为垂直方向 */
  transform: rotate(-90deg);
  /* 调整位置避免旋转后偏移出布局 */
  margin: 60px 0;
  /* 旋转后原高度变为宽度，按需调整数值 */
  width: 200px;
}

如果需要数值从下往上递增，可将旋转角度改为rotate(90deg)，同时配合min和max属性反向设置数值范围。

方法二：调整内部元素布局（无旋转） #

若不想因旋转产生布局偏移，可直接修改组件内部元素的排列逻辑：

1. 给ion-range添加自定义类名后，写入以下CSS：

.vertical-range {
  display: flex;
  flex-direction: column;
  /* 设置垂直方向的总长度 */
  height: 200px;
  width: auto;
  align-items: center;
}

/* 将滑块容器改为垂直排列 */
.vertical-range .range-slider {
  flex-direction: column;
  height: 100%;
  width: auto;
}

/* 修改轨道为垂直样式 */
.vertical-range .range-track {
  width: 4px;
  height: 100%;
}

/* 调整滑块居中显示 */
.vertical-range .range-knob {
  margin: 0 auto;
}

注：若类名不生效，可通过浏览器开发者工具查看组件DOM结构，替换为对应版本的内部类名。

事件逻辑说明 #

两种方案下，ionChange事件的处理逻辑无需修改，组件的value值仍保持正常数值范围，仅视觉呈现为垂直方向。

内容的提问来源于stack exchange，提问作者SimonIoa