10 - The onchange event in input type="range" (working with style width and height) | JS lessons

Task 1.

Create an input with type="range" and a button. When the button is clicked, log the selected value from the input to the console.

Task 2.

Create an input with type="range" and a button. The user should be able to select a value using the slider. When the button is clicked, change the button’s width based on the selected value (use the width property).

Task 3.

Create an input with type="color" and a button. When the value changes, update the button’s background color in real time (use style.background).

Task 4.

Create an input with type="range" and a div. When the slider value changes, display the selected value inside the div in real time.

Task 5.

Create two inputs with type="range" (height and width) and one input with type="color" (background). When the values change, update the button’s size and background color in real time (use onchange).

Task 6.

Create an input with type="number" and a button. When the button is clicked, set the button’s width to the value entered in the input.