0

I have a bunch of <input> sliders, with DOM that looks something like this -

<div>
  <label style="width:100px">Slider A: </label>
  <input type="range" style="width:600px; height:20px;"/>
  <svg width="600px" height="20px">
    <rect x="0" y="0" width="300" height="20"></rect>
  </svg>
</div>

I want the svg rectangle to highlight portion of the input, let's say starting at left, ending exactly at middle in this example, but other ranges are also possible.

How do I do position the svg so that it exactly overlaps the input?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
KalEl
  • 8,978
  • 13
  • 47
  • 56
  • 1
    Overall... I'd say you're taking the wrong approach. See the fiddle provided by Ales in the *comments* [here](http://stackoverflow.com/a/18389801/1860561). IF you need to use a SVG, you may need to use relative/absolute positioning. – gitsitgo Mar 08 '16 at 19:56

1 Answers1

0

I got the answer to this after some research. Posting in case anyone comes across this.

Basically define height/width for the container div, and set style="position:absolute" for the divs that need to overlap.

KalEl
  • 8,978
  • 13
  • 47
  • 56
  • 1
    don't forget to add `position: relative` on the container element, as the absolute positioned div may end up in weird places – Rogier Spieker Mar 08 '16 at 22:29