I have a custom slider element. I want to render many slider elements in the same page but the problem I have is that the dynamic CSS styling targets common attribute names thus if I have two elements #sliderA and #sliderB, the changes that should happen to #sliderB happen to sliderA instead.
I suppose I require JavaScript to target the data-freq attribute of the respective slider element.
https://codepen.io/ryanvb92/pen/poNLQEO
As you can guess, I'm working with someone else's pen. Here is the original pen.
Css is pretty straight forward
input {
&:checked {
+ label::after {
border-width: 4px;
transform: translate(-50%, -50%) scale(0.75);
}
....
The above rule is used to style a checked input and is working as expected. The only problem is that you are providing same id to multiple input tags.
<input type="radio" name="smokingFreq" id="1" value="1" required>
<input type="radio" name="drinkingFreq" id="1" value="1" required>
Notice how input elements are sharing same id across different sliders. Duplicating ids is strictly avoided because browser expects them to be unique throughout the document.
Just use unique ids for all inputs. Something like this should fix your issue.
<input type="radio" name="smokingFreq" id="smokingFreq-1" value="1" required>
<input type="radio" name="drinkingFreq" id="drinkingFreq-1" value="1" required>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments