Inputs » slider » width

Community Help
1

Hi Jeremy (@jashkenas),

What is the best way to increase the width of a slider so you can set values more precisely?

E.g. a zoom slider can range from .1 to 20, say. The area between .1 and 1 is relatively small and therefore hard to set.

Please advise.

I tried to d3.select one and set it’s style width, but couldn’t get its handle. selectAll did work, but changes all sliders (obviously).

2

One thing you could do is to pass a function that transforms the actual slider value using something like a log or exponential function so the portion of the slider between 0.1 and 1 is larger than the portion devoted t, for example, 3 to 4.

3

if you’re using slider from @jashkenas/inputs you can do this

viewof vslider = {
  const s = slider({
    min: 0.1,
    max: 20
  });
  s.querySelector('input').style.width = "100%";
  return s;
}

the input range is wrapped in a form element

edit:
you can also access the input without the querySelector the form element has a list of input elements, in that case you can do

viewof vslider = {
  const s = slider({
    min: 0.1,
    max: 20
  });
  s.input.style.width = "100%";
  return s;
}
2 Likes
4

Thanks, good suggestion. Will pursue.

1 Like
5

Ah, wonderful Radamés. Works like a charm. Exactly what I needed.