range slider html css javascript

Question

I'm planning to make a 'range slider' type in registration form and the JavaScript validation 'must be 16 years and above'.

Example if I'm plan make a JavaScript valuation "must be minimum 0 years and maximum 50 years", these are the html

<input type="range" id="vol" name="vol" min="0" max="50">

But if I'm assuming 'must be 16 years and above' the minimum is 16 years old and the maximum is infinite, what would the html code be? is infinite possible or the maximum is always 100?

Answer 1

Normally I would point to the MDN reference in a question, but here I would say what it provides is somewhat contradictory. In the max attribute section of the range <input/> MDN reference they state:

The greatest value in the range of permitted values. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a number, then the element has no maximum value.

This would make it sound as though an infinite upper range is a possibility. However, the MDN reference also states that default max value is 100. Testing in the dev tools, omitting the max does indeed seem to show that, if omitted, the <input type="range" /> will simply default the maximum to 100.

If we think about this more, it makes sense. Unlike a <input type="number" />, which simply shows the numerical value as a number, a <input type="range" /> is a graphical, geometric representation of the number. Given this, how could we convey an infinite upper bound without an infinitely long screen and slider? If you set the slider to be a finite width and somehow made it so that the far right edge represented infinity, how would you determine where to stop incrementing numbers and change to infinity?

(I will state that, technically, in JS typeof Infinity is a number. However, putting that in the max attribute of a <input type="range" /> just defaults it to 100.)

Answer 2

giphy animated gif link

I have developed a range slider but it uses html css and angular (typescript). You may have to modify code slightly but it works by using a CSS circle, placing the number value at a position in that circle, and placing that over the input range.

html section

<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 section (In the angular component class)

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 section

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