[英]range slider html css javascript
我打算在注冊表中制作一個“范圍滑塊”類型,並且 JavaScript 驗證“必須年滿 16 歲”。
例如,如果我計划進行 JavaScript 估值“必須最短 0 年,最長 50 年”,這些是 html
<input type="range" id="vol" name="vol" min="0" max="50">
但是,如果我假設“必須年滿 16 歲”,最小值為 16 歲,最大值為無限,那么 html 代碼是什么? 是無限可能還是最大值總是 100?
通常我會在問題中指向 MDN 參考,但在這里我會說它提供的內容有些矛盾。 在范圍<input/>
的max
屬性部分 MDN 參考他們 state:
允許值范圍內的最大值。 如果輸入到元素中的值超過此值,則該元素將無法通過約束驗證。 如果 max 屬性的值不是數字,則該元素沒有最大值。
這聽起來好像無限上限是可能的。 但是,MDN 參考還指出默認max
為100
。 在開發工具中測試,省略max
似乎確實表明,如果省略, <input type="range" />
將簡單地將最大值默認為 100。
如果我們更多地考慮這一點,這是有道理的。 與<input type="number" />
將數值簡單地顯示為數字不同, <input type="range" />
是數字的圖形幾何表示。 鑒於此,我們如何在沒有無限長屏幕和 slider 的情況下傳達無限上限? 如果您將 slider 設置為有限寬度並以某種方式使其最右邊緣代表無窮大,您將如何確定停止遞增數字並更改為無窮大的位置?
(我將state 從技術上講,在 JS typeof Infinity
中是一個數字。但是,將它放在<input type="range" />
的max
屬性中只是將其默認為100
。)
我開發了一個范圍 slider 但它使用 html css 和 angular(打字稿)。 您可能需要稍微修改代碼,但它的工作原理是使用 CSS 圓圈,將數字值放在該圓圈中的 position 處,並將其放在輸入范圍內。
html款
<div class="row small-margin"><div class="col-lg-8 small-padding">
<div class="form-group has-success">
<label>Credit Score</label>
<br />
<div class="ui medium-padding">
<div class="slidecontainer">
<input #creditSlider (input)="updateCreditSlider()" (change)="updateCreditSlider()" type="range" min="300" max="850" value="{{ creditSliderValue }}" class="slider" id="myRange">
</div>
</div>
<div #creditSliderSpan class="sliderValue circle" >
<span class="noselect">{{ creditSliderValue }}</span>
</div>
<div #creditSliderTrack class="sliderTrack" ></div>
</div>
typescript部分(在angular組件類中)
creditSliderValue : any;
@ViewChild('creditSlider') creditSlider;
@ViewChild('creditSliderSpan') creditSliderSpan;
.
.
.
updateCreditSlider() {
let horizontalOffset:number = 0;
//values from 300 to 850 - Next value needs to be adjusted based on your placement of slider object
horizontalOffset = ( (Number.parseInt(this.creditSlider.nativeElement.value )- 280)/2.45);
this.creditSliderSpan.nativeElement.style.left = ( horizontalOffset )+ 'px';
this.creditSliderSpan.nativeElement.style.top = this.creditSliderSpan.nativeElement.style.top + 'px';
this.creditSliderValue = this.creditSlider.nativeElement.value;
}
css款
.smallPadding {
margin-bottom: 0px;
padding: 4px;
}
.slidecontainer {
width: 100%; /* Width of the outside container */
}
/* The slider itself */
.slider {
position: relative;
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width:275px;
//width: 100%; /* Full-width */
height: 15px;
border-radius: 5px;
//background: #d3d3d3; /* Grey background */
background: rgba(211,211,211, 0.00);
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
z-index: 20;
}
/* Mouse-over effects */
.slider:hover {
//opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
position: relative;
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 50px; /* Set a specific slider handle width */
height: 50px;
border-radius: 50%;
border-style: none;
//background: #4CAF50; /* Green background */
background: rgba(76,175,80, 0.00);
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 25px; /* Set a specific slider handle width */
height: 25px;
border-radius: 50%;
border-style: none;
//background: #4CAF50; /* Green background */
background: rgba(76,175,80, 0.00);
cursor: pointer; /* Cursor on hover */
}
.sliderValue {
position: absolute;
top: 25px;
left: 0px;
width: 100%; /* Width of the outside container */
z-index: 15;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
@media screen and (max-width: 992px) {
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 14pt;
color: black;
line-height: 46px;
text-align: center;
background: white;
vertical-align: center;
//display: table-cell;
border-style: solid;
border-color: #7E7E7E;
}
.medium-padding {
padding-top: 14px;
padding-bottom: 14px;
}
.sliderTrack {
position: relative;
width: 220px;
height: 10px;
background-color: #E0E1E2;
vertical-align: center;
border-radius: 5px;
top: -35px;
left: 25px;
//display: table-cell;
//border-style: solid;
//border-color: #7E7E7E;
}
.left-padding {
padding-left: 14px;
}
.small-margin {
margin-left: 4px;
}
.medium-margin {
margin-left: 10px;
}
.small-padding{
padding: 4px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.