1

I have a few sliders in javascript (specifically using p5.js library) for which some styling needs to be added (add labels and do some colouring). Is it possible to do so in javascript, without using HTML and CSS?

Abby
  • 306
  • 3
  • 13

1 Answers1

2

p5 sliders are p5 Elements, and can be styled with functions like Element.style and Element.class. In this case, you can directly style the slider with something like slider.style('background', 'red');

If you want to style a pseudo-element (like the actual tab on the slider), it seems a bit more tricky, especially without CSS. You can read more about the various approaches here. If you want a solution that runs in only JavaScript, you could add a class then dynamically insert a stylesheet into DOM, as per this answer.

Edit: Adding Labels

It doesn't seem that p5.dom has a function for creating label elements, but you can create div elements using createDiv, and then combine elements together. So if you want a label on the left side, you can do something like:

label = createDiv('Red');
label.position(30, 30);  
slider = createSlider(0, 255, 100);
slider.parent(label);

If you want the label on the right side, it's a little more tricky:

group = createDiv('');
group.position(30, 30);  
slider = createSlider(0, 255, 100);
slider.parent(group);
label = createSpan('Red');
label.parent(group);

References:

Community
  • 1
  • 1
Steve
  • 10,435
  • 15
  • 21
  • I just want to add some text next to it as a label! how would I achieve that? more importantly what would be the argument for that? – Abby Jun 10 '18 at 18:58
  • Hi Abby, I've updated my answer, it's a little complicated to write in just a comment – Steve Jun 10 '18 at 19:24