Range - to select text alignment

Design help Custom code
1

I am using the input type of range - because aesthetically it looks nice on my site.

However, I want to convert its number value to change the alignment of my output text. I am doing a font foundry style website. This website uses symbols that you can select to change the font alignment but I want to stick to the range slider and I am getting stuck about how to think about it. I am still learning javascript.

Can anyone help me think about this in vanilla javascript?

Range type is marked up like this -
input type=“range” name=“spacingSizeOne” min=1 max=3 value=2 step=1></input

Javascript - I want to do something like this and convert the number to a string essentially…

alignmentOneTag.addEventListener(“input”, function() {

//when a range position selected update font alignment
//if input is 1 = left align
//if input is 2= center align
//if input is 1= right align
//default - is 2 = center

Wondering if it is possible and if so along these lines - although I know this isn’t right.

if (this = 1 )
outputOneTag.style.textAlign = “left”

else (this = 2 )
outputOneTag.style.textAlign = “center”

else if (this = 3 )
outputOneTag.style.textAlign = “right”

})

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

@V_O - if I’m understanding you correctly this should be fairly straightforward with JavaScript and the oninput event listener.

Basically all you need to do is set up the values on your slider, then set up a listener to change the text alignment when the user changes the value of the range input.

So something like this should work:

rangeElement.addEventListener('input', function () {
  let value = rangeElement.value;
  switch(value) {
    case 1:
      targetElement.style.textAlign = 'left';
      break;
    case 2:
      targetElement.style.textAlign = 'center';
      break;
    case 3:
      targetElement.style.textAlign = 'right';
      break;
  }
}, false);

Since I don’t have your code I haven’t tested this but it should be pretty easy to pull of with something like this.

3

Hi, Thank you so much for replying. I have put the code in and I thought I had wired it up properly but it isn’t working. This is my read only link - would you be able to take a look and see where I am going wrong?

https://preview.webflow.com/preview/nftype-2b8085?utm_medium=preview_link&utm_source=designer&utm_content=nftype-2b8085&preview=23a60eea6ae855748293faad0ae1b1cd&workflow=preview

1 Like
4

Hi @V_O here is a simple example how it can be done.

Hope it will solve your request

2 Likes
5

Thank you - this is really helpful and great to understand what you have done to get this to work. I am going to try and implement it.

1 Like