# Inputs » slider » width

**URL:** <https://talk.observablehq.com/t/inputs-slider-width/3126>\
**Category:** Help\
**Created:** [April 22, 2020, 3:45pm UTC](https://talk.observablehq.com/t/inputs-slider-width/3126 "2020-04-22T15:45:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [April 22, 2020, 3:45pm UTC](https://talk.observablehq.com/t/inputs-slider-width/3126/1 "2020-04-22T15:45:08Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![j-f1](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/j-f1/32/368_2.png) [@j-f1](https://talk.observablehq.com/u/j-f1)\
**Post date:** [April 22, 2020, 11:13pm UTC](https://talk.observablehq.com/t/inputs-slider-width/3126/2 "2020-04-22T23:13:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\
**Post date:** [April 23, 2020, 12:16am UTC](https://talk.observablehq.com/t/inputs-slider-width/3126/3 "2020-04-23T00:16:47Z")

</div>

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

```auto
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

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

```

---

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [April 23, 2020, 10:28am UTC](https://talk.observablehq.com/t/inputs-slider-width/3126/4 "2020-04-23T10:28:51Z")

</div>

Thanks, good suggestion. Will pursue.

---

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [April 23, 2020, 10:29am UTC](https://talk.observablehq.com/t/inputs-slider-width/3126/5 "2020-04-23T10:29:17Z")

</div>

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