Html 垂直输入类型的最大和最小位置标签;“范围”;
您好:)我在垂直输入范围滑块左侧定位最小值和最大值的标签时遇到困难。我希望.label_max位于滑块顶部,.label_min位于滑块底部 HTML: 现在,由于“text align:center”(文本对齐:中心),标签被定位在中心位置,并且它们已通过“left:-40px”调整到左侧,但我无法找出将.label_max放置在滑块顶部,将.label_min放置在底部的最佳方法,以便用户有一个参考 下面是它现在的屏幕截图: 非常感谢你的帮助。非常感谢 我想我找到了答案(只花了两天时间),我希望这在所有移动设备上都能正常工作。我意识到,如果范围本身使用垂直翻转设备宽度的100%,我也可以将其用作标签本身的参考。因此,对于.label_max,我添加了底部:48vw(我不希望它位于条形图的最顶部,但很接近),对于.label_min,我添加了顶部:48vwHtml 垂直输入类型的最大和最小位置标签;“范围”;,html,css,input,ionic3,range,Html,Css,Input,Ionic3,Range,您好:)我在垂直输入范围滑块左侧定位最小值和最大值的标签时遇到困难。我希望.label_max位于滑块顶部,.label_min位于滑块底部 HTML: 现在,由于“text align:center”(文本对齐:中心),标签被定位在中心位置,并且它们已通过“left:-40px”调整到左侧,但我无法找出将.label_max放置在滑块顶部,将.label_min放置在底部的最佳方法,以便用户有一个参考 下面是它现在的屏幕截图: 非常感谢你的帮助。非常感谢 我想我找到了答案(只花了两天时间),
<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>
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;
}
}