Search jQuery

jQuery Forum

How do I add text labels below Slider?

in jQuery Mobile • 1 year ago

Product requirement is straightforward: Label goes above the slider but the product managers want two labels (e.g., low and high) at either end of the slider below it. Is this possible and if so can anyone point me to an implementation or code sample?

Replies(7)

hexintera..

Re: How do I add text labels below Slider?

1 year ago

Take a look at: http://jsbin.com/afejel/18/ all I did was add two spans to the label and position them under the slider.

<div data-role="fieldcontain">
<label for="slider">Input slider:
<span class="min">min:0</span>
<span class="max">max:100</span>
</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>

I hope this helps.

-Bryan

bspr

Re: How do I add text labels below Slider?

1 year ago

Not working for me using this:

<div data-role="fieldcontain">
<label for="advRating">How would you rate us?
<span class="min">Unlikely</span>
<span class="max">Extremely Likely</span>
</label>
<input type="range" id="advRating" name="advRating" min="0" max="10" value="" data-theme="b">
</div>

avalpert

Re: How do I add text labels below Slider?

1 year ago

Hey, I have a question about your use of this code. I have found it works ok for browser, less well for mobile devices when horizontal as the labels aren't in the same position relative to the slider and doesn't work at all for mobile's viewed vertically because the labels go on top instead of next two the input. Have you done anything in your page to make it work more consistently across browsers?

bspr

Re: How do I add text labels below Slider?

1 year ago

As seen in the image, my use was mobile only. Haven't looked at the desktop answer yet.

markmarij..

Re: How do I add text labels below Slider?

1 year ago

$.fn.extend({
sliderLabels: function(left,right) {
var $this = $(this);
var $sliderdiv= $this.next("div.ui-slider[role='application']");
$sliderdiv
.css({'font-weight': 'normal'});
$sliderdiv
.prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px;">'+left+ '</span>')
.append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; top:20px;">'+right+ '</span>');
}
});
$('#slider').sliderLabels('LEFT','RIGHT');

http://jsfiddle.net/cUNyr/1/

hornerf

Re: How do I add text labels below Slider? but my font is not displaying properly

5 months ago

Hi kind people of the internet,

The above posted solution has been most helpful, but when I implement it, my label font is not displaying properly...it's some sort of odd ball font...and I want just a plain Arial font.

I'm using jQuery Mobile 1.20. Here's my test page:

http://www.simdock.com/amort-test/dev-scratch/amort/scratchtesting-Slider-label-font-issue.html

I've made several attempts to altering the span to change the font, but alas, with no success. So any help advice would be super appreciated.

thanks in advance

hornerf

Re: How do I add text labels below Slider?

5 months ago

Howdy,

found out on Stackoverflow, that if use a theme on the slider, it was some-how-or-other inducing 'shadow text' on the label. So, after some hints (from Stackoverflow) put on the in line adjustment to the prepend and the append: text-shadow:none; color:black; font-weight:normal

//
$sliderdiv
.prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px; text-shadow:none; color:black; font-weight:normal">'+left+ '</span>')
.append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; bottom:20px; text-shadow:none; color:black; font-weight:normal">'+right+ '</span>');
//

Top Reply

Response title

Attachments

jQuery Forum

How do I add text labels below Slider?

Replies(7)

Re: How do I add text labels below Slider?

Re: How do I add text labels below Slider?

Re: How do I add text labels below Slider?

Re: How do I add text labels below Slider?

Re: How do I add text labels below Slider?

Re: How do I add text labels below Slider? but my font is not displaying properly

Re: How do I add text labels below Slider?

Statistics

Tags

Actions

Related Posts