How to change the padding in Javascript using the slider input

user_11158862 0
Viewed 740

I am trying to change the padding on an image by using a slider input. The idea is that users can upload an image an customise it. One of the option is a slider to change horizontal padding (one slider for each). Each slider have a values from -50 to 50 with a default value of 0. For example, if a user moves the 'horizontal padding slider' to the left (negative values), both left and right padding will decrease, and if the move the slider right (positive values) it will increase both left and right padding.

I have created the HTML slider with the values. Then, within the javascript file, I have created an event listener for the input value and a function to change it but is not working at all.

HTML CODE:

<form class="range-field mt-2">
  <input type="range" min="-50" max="50" value="0" id="horizontal-padding" 
  step="2" />
</form>

JAVASCRIPT CODE:

var slider = document.getElementById("horizontal-padding").value;
var mycanvas = document.getElementById("mycanvas");

slider.addEventListener('change', function() {
    mycanvas.style.padding = slider.value;
});

Anyone can please let me know whats wrong? many thanks in advance!

slider input css dom javascript
3 Answers

Answer:

There were a number of things that needed to change to get this to a working state.

  • You were declaring slider with .value. This does not point to the element, but the value.

  • You need to declare your myCanvas variable to point to an element.

  • You need to add a unit for your CSS update. This can be px (most common), em, rem,vw,vh, etc. A simple integer ( as is given by slider.value ) will not cut it.

  • padding visually cannot be represented as a negative because it is not designed to be inset below the value 0. This means that your slider going to -50 doesn't make much sense. In the snippet below I updated it to the range 0-100.

Code:

var slider = document.getElementById("horizontal-padding"),
myCanvas = document.getElementById("myCanvas");

slider.addEventListener('change', function() {
    myCanvas.style.padding = slider.value + "px";
});

Example:

var slider = document.getElementById("horizontal-padding"),
myCanvas = document.getElementById("myCanvas");

slider.addEventListener('change', function() {
    myCanvas.style.padding = slider.value + "px";
});
canvas {
border: 1px solid black;
}
<form class="range-field mt-2">
  <input type="range" min="0" max="100" value="0" id="horizontal-padding" 
  step="2" />
</form>
<canvas id="myCanvas">Your browser does not support HTML5 Canvas</canvas>

Note: I added a border to myCanvas in the CSS so that the changes of padding would be visible.

Aside: Making the transition 'smooth'

change is the event handler you are currently using. This can make the update to the styling look choppy because the update is a rerender once the slider handle is released.

If you would like to have a more fluid representation of padding changing, you can use the input event instead. This event constantly renders based on the changes made to the slider element, not just the final selection, and is available in all modern browsers including IE9 and Edge. For more information see MDN

Example:

var slider = document.getElementById("horizontal-padding"),
myCanvas = document.getElementById("myCanvas");

slider.addEventListener('input', function() {
    myCanvas.style.padding = slider.value + "px";
});
canvas {
border: 1px solid black;
}
<form class="range-field mt-2">
  <input type="range" min="0" max="100" value="0" id="horizontal-padding" 
  step="2" />
</form>
<canvas id="myCanvas">Your browser does not support HTML5 Canvas</canvas>

user_37008490

What is myCanvas You need to select it as well in your js.

var myCanvas = document.getElementById()
var slider = document.getElementById("horizontal-padding")

silder.addEventListener('change', () => {
        myCanvas.style.padding = slider.value
  });
user_108645700 
var slider = document.getElementById("horizontal-padding").value;

You want to access the HTML element and not its value. You should remove the '.value' and it will work. Also I would suggest using the 'input' event because 'change' will only be triggered when you release the slider.

P.S. I assumed that you have selected your canvas before you tried to change it.

user_42593530
Related