Why is my toggle slider not moving when clicked? - html

Question

I found some code that creates a slider, but I can't seem to get the movement to occur when the input is clicked on. It's actually not doing anything when activated. I'm using SASS as my preprocessor. I'm able to see the switch on the screen, but when I click to activate the slide feature, nothing happens.
HTML
<div className='prefilloptions_container'>
<div className='prefilloptions'>
<label>Defaults</label>
<input type='checkbox' name='default' value='yes' />
<span className='slider round' />
</div>
</div>
SCSS
.prefilloptions_container {
display: flex;
justify-content: center;
width: 100%;
.prefilloptions {
width: 5vw;
height: auto;
position: relative;
display: inline-block;
& input {
opacity: 0;
width: 0;
height: 0;
&:checked {
background-color: #2196f3;
}
&:focus {
box-shadow: 0 0 1px #2196f3;
}
}
label {
margin-right: 0.5vw;
}
input:checked + .slider {
background-color: #2196f3;
}
input:checked + .slider::before {
transform: translateX(26px);
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
.slider {
position: absolute;
cursor: pointer;
top: -3px;
left: 70px;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
width: 2vw;
height: 1.7vh;
&::before {
position: absolute;
content: '';
height: 15px;
width: 15px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
}
&.round {
border-radius: 34px;
width: 1.7vw;
&::before {
border-radius: 50%;
}
}
}
}
}

Answer 1

Looks like I was able to figure this out. Apparently, I needed to surround the input and span elements with label element rather than having the label element on it's own line.
Old Code
<div className='prefilloptions_container'>
<div className='prefilloptions'>
<label>Defaults</label>
<input type='checkbox' />
<span className='slider round' onClick={alertMe} />
</div>
</div>
New Code
<div className='prefilloptions_container'>
<div className='prefilloptions'>
<label>
Defaults
<input type='checkbox' />
<span className='slider round' onClick={alertMe} />
</label>
</div>
</div>

Answer 2

Mabye this HTML-slider will help you:
<input type="range" min="1" max="100" value="50">