Search code examples
jquerymobilerangeslider

reclaim rangeslider space and make it wider

I am trying to get rid of the spaces that are above the rangeslider. I thought hiding the labels was what I needed to do but that only made the space blank. How can I get rid of this space?

I saw "margin:0" in another post and tried that but it didn't work.

<div data-role="rangeslider">
    <label for="range-1a" class="ui-hidden-accessible">Rangeslider:</label>
    <input type="range" name="range-1a" id="range-1a" min="-10" max="50" value="-10" step="10">
    <label for="range-1b" class="ui-hidden-accessible">Rangeslider:</label>
    <input type="range" name="range-1b" id="range-1b" min="-10" max="50" value="50" step="10">
</div>
Solution

  • I collapsed the inputs with this.

    $(".ui-slider-input").wrap($('<div />').css({
  position: 'relative',
  display: 'inline-block',
  height: '0px',
  width: '0px',
  margin: '0px',
  overflow: 'hidden'
}));