reclaim rangeslider space and make it wider

Question

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>

I found a way to get rid of the margin. setting margin:0 in my own css as an important override didn't work so I found it in the original css file and commented it out. That seems to work for me. .ui-rangeslider .ui-rangeslider-sliders { position: relative; overflow: visible; height: 30px; /* margin: .5em 68px;*/ } Now all I have to figure out is how to suppress the size of the input boxes that are associated with the slider so they don't take up space. — user2332467, Oct 13 '13 at 21:07
I fixed the rest with some javascript: $(".ui-slider-input").wrap($('
').css({ position: 'relative', display: 'inline-block', height: '0px', width: '0px', margin: '0px', overflow: 'hidden' })); — user2332467, Oct 13 '13 at 22:21

score 0 · Accepted Answer · answered Oct 13 '13 at 22:22

0

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'
}));

answered Oct 13 '13 at 22:22

user2332467

119
1
11

reclaim rangeslider space and make it wider

1 Answers1