html - 垂直输入类型的最大值和最小值的位置标签 "range"

Question

你好 :) 我很难将最小值和最大值的标签定位在垂直输入范围 slider 的左侧。我希望 .label_max 位于 slider 的顶部，而 .label_min 位于 slider 的底部。

HTML:

<ion-content class="dark-container" padding>
  <ion-grid>
    <ion-row class="wizard_meter_content_block">
      <ion-col>
        <strong>How are you feeling about reaching your overall goal?</strong>  
        <br>
        Use this meter to indicate how you feel
      </ion-col>
    </ion-row>
    <ion-row class="wizard_meter_content_block">
      <ion-col>
        <label class="label_max">100 -</label>
        <label class="label_min">0 -</label>
        <input type="range" min="0" max="100" />
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

CSS:

page-wizard-meter {
    font-weight: lighter;

    ion-grid {
        height: 100%;
        display: flex;
    }

    .wizard_meter_content_block:nth-of-type(1) {
        height: 30%;
        align-items: center;
        text-align: center;
    }

    .wizard_meter_content_block:nth-of-type(2) {
        height: 70%;
        justify-content: center;
        align-items: center;
    }

    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        transform: rotate(-90deg);
        background: #0d6192;
        border: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        background: linear-gradient(to right, red, orange, yellow, green);
        border-radius: 20px;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: white;
        width: 20px;
        height: 20px;
        border-radius: 20px;
    }

    .label_max {
        text-align: center;
        left: -40px;
    }

    .label_min {
        text-align: center;
        left: -40px;
    }
}

现在，由于“text-align: center”，标签位于中心，并且已使用“left: -40px”将它们调整到左侧，但我无法找出最佳定位方式.label_max 位于 slider 顶部，.label_min 位于 slider 底部，以便用户有引用。

这是现在的截图:

非常感谢您的帮助。非常感谢!

Answer 1

我想我弄明白了(只花了两天时间)，我希望这在所有移动设备上都能正常工作/看起来不错。我意识到，如果范围本身使用垂直翻转设备宽度的 100%，我也可以将其用作标签本身的引用。因此，对于 .label_max，我添加了 bottom: 48vw(我不希望它位于栏的最顶部，但很接近)，对于 .label_min，我添加了 top: 48vw。