垂直输入类型“范围”的最大和最小位置标签

Hello :) I'm having difficulty positioning the labels for the min and max values on the left side of a vertical input range slider. I want the .label_max to be at the top of the slider and the .label_min to be at the bottom of the slider.

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

HTML:

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:

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;
    }
}

Right now the labels are positioned in the center thanks to the "text-align: center" and they have been adjusted to the left side with the "left: -40px", but I cannot figure out the best way of positioning the .label_max to be at the top of the slider and the .label_min at the bottom so the user has a reference.

现在由于“文本对齐：中心”，标签位于中心，并且它们已经通过“left：-40px”调整到左侧，但我无法找出定位.label_max的最佳方法位于滑块顶部，底部是.label_min，因此用户可以参考。

Here is a screenshot of what it looks like now:

以下是现在的截图：

垂直输入类型“范围”的最大和最小位置标签

Thanks so much for any help. It is much appreciated!

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

1 个解决方案

#1

I guess I figured it out (it only took two days) and I'm hoping this will work/look okay on all mobile devices. I realized that if the range itself is using 100% of the width of the device being flipped vertically that I could also use that as a reference for the labels themselves. So, for .label_max I added bottom: 48vw (I don't want it at the very very top of the bar, but close) and for .label_min I added top: 48vw.

我想我想出来了（它只用了两天），我希望这对所有移动设备都能正常工作/看起来不错。我意识到如果范围本身使用垂直翻转的设备宽度的100％，我也可以使用它作为标签本身的参考。所以，对于.label_max，我添加了底部：48vw（我不希望它在条形的最顶端，但是关闭）而对于.label_min我添加了顶部：48vw。

秒客网

垂直输入类型“范围”的最大和最小位置标签

1 个解决方案

#1

#1

相关文章