0

If I wanted to use a component 20 times on my page (Eg. The following, which is a box with 4 range sliders), is there a way to do this without writing this code 20 times? Is there something similar to the react component in html? Thank you!

<div class = "slidecontainer" id = sliders>
<br>
<label for = "Slider A"><input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "slider_A"> &nbsp; <span id = "slider-value-A"></span></label><br>
<label><input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "slider_B"> &nbsp; <span id = "slider-value-B"></span> &nbsp; </label><br>
<label><input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "slider_C"> &nbsp; <span id = "slider-value-C"></span> &nbsp; </label><br>
<label><input type = "range" min = "0" max = "100" value = "0" class = "slider" id = "slider_D"> &nbsp; <span id = "slider-value-D"></span> &nbsp; </label>
</div>

Thank you!

Improve this question
4
  • Plain HTML does not have that functionality. You will have to use some framework (like React or Vue) to do that. Commented Mar 21, 2022 at 10:39
  • Then do I have no other choice but to write it multiple times if I am only using html? Would it be better if I used javascript to do it instead? Commented Mar 21, 2022 at 10:44
  • This is an answer with just plain JavaScript. Commented Mar 21, 2022 at 10:48
  • Yes, You can write plain JavaScript in a common.js file and set content by ID or Class on multiple pages/places. Commented Mar 21, 2022 at 10:59
Related questions
0
Can we create any general HTML Component?
3
Custom or Reusable HTML component
0
How do I create a reusable JavaScript component
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.