Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


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


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>



Please insert min. 20 characters.

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