How to detect click with native html/css for slider

Question

I am trying to create slider only with html/css. I'm using inputs and labels.

This is my css code. I'm moving my div to left when element is checked.

.firstCat:checked ~ .carousel-wrapper div { left: 360px; transition: left 0.3s ease-in-out; }

Is it the only way to create sider? Maybe you more elegant solution.

Answer 1

<input type="range" min="1" max="100" value="50" class="slider">

You can use input type "range".