Topic: mdb-range-input html validation error
bitjuice pro asked 3 years ago
Hi,
I'm using angular bootstrap slider and multi range slider, but I get html validation errors due to not unique id of html tag (mdb-range-input/*mdb-multi-range-input* and input elements have same id).
<mdb-range-input _ngcontent-serverapp-c172="" id="range">
<div class="range-field ng-star-inserted">
<div class="track">
<div title="range" class="range-cloud hidden" style="left: 125.3px;"><span class="text-transform">20</span></div>
</div>
<input type="range" id="range" min="0" max="100" step="undefined" class="ng-untouched ng-pristine ng-valid">
</div>
</mdb-range-input>
<mdb-multi-range-input _ngcontent-serverapp-c181="" min="14" id="agerange" step="1" max="100">
<div class="multi-range-field my-5 pb-5"><div class="range-field"><div class="track">
<div title="range" class="range-cloud hidden" style="left: 7.5px;"><span class="text-transform">14</span></div></div>
<input type="range" class="mdbMultiRange original active ng-untouched ng-pristine ng-valid" id="agerange" min="14" max="100" step="1" value="14">
<div class="track"><div title="range" class="range-cloud hidden" style="left: 554.5px;"><span class="text-transform">100</span></div></div>
<input type="range" class="mdbMultiRange original ghost active ng-untouched ng-pristine ng-valid" id="agerange" min="14" max="100" step="1" value="100"></div>
</div>
</mdb-multi-range-input>
I there a way to fix this issue?
Thanks Marco
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
Could you provide more details about the problem? You should be able to customize the id using
id
input in both components:<mdb-range-input id="range" min="0" max="100"></mdb-range-input>
<mdb-multi-range-input id="multi-range" min="0" max="100"></mdb-multi-range-input>