ion-range component accepts out of bounds values

[liamdebeasi]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

<ion-range min="0" max="10" value="5"></ion-range>

If I set the value on this range component to be -1, ionChange fires and the component's value is set to be -1.

Expected behavior:

I would expect this to behave similar to the native range component. If a value is out of range, set it to either the min or the max (whichever value is closer).

Steps to reproduce:

Related code:

<ion-range min="0" max="10" value="5" id="range"></ion-range>
<ion-button onclick="changeValue()">change value</ion-button>

<script>
let range = document.getElementById('range');

range.addEventListener('ionChange', (e) => {
  console.log('change',e.detail);
});

function changeValue() {
  range.value = -1;
}
</script>

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (/Users/liamdebeasi/.nvm/versions/node/v10.15.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.15.0 (/Users/liamdebeasi/.nvm/versions/node/v10.15.0/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[liamdebeasi]

Resolved by #17623

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.