2

I am using a jquery mobile slider button

<input type="range" name="slider" id="slider-0" value="25" min="0" max="100" step="5" />

The slider automatically generates a text input and in Chrome it also puts a spin button inside of the text input. Anyone know how to change the color of this spin button?

spin button

Community
  • 1
  • 1
Occam
  • 519
  • 5
  • 18
  • Hi, could you create a [JSFiddle](http://jsfiddle.net/) for this..? – Kent Pawar Dec 13 '12 at 16:52
  • I doubt a JSFiddle would better demonstrate what I am looking for. However here is a link to aan image of how this spin buttons currently look, I am wanting to change their color. http://infobrink.com/wp-customImages/spin-button.png – Occam Dec 13 '12 at 17:50
  • Just to confirm, could you post the actual working code. But I am sure what you are seeing is just a scrollbar. http://stackoverflow.com/questions/9989615/remove-text-box-in-slider-control-in-jquery-mobile – Kent Pawar Dec 13 '12 at 18:35
  • Here is a [link](http://jsfiddle.net/g6Jr6/) of what I am looking at. Notice how in Chrome the input box adds arrows/spin box - That is what I am trying to change the color on – Occam Dec 13 '12 at 19:23
  • Well there is an event handler when the value of the textbox changes via user inout.. So if I write 58 in the textbox the scroller jumps to 58 accordingly.. So all you need to do is create two spin buttons that change the value in the text-box. The existing event handlers would take care of the rest.. :) – Kent Pawar Dec 14 '12 at 05:07
  • checkout the spinner in jquery ui, maybe it can translate to mobile... – MrBrightside Dec 15 '12 at 01:31

2 Answers2

0

you can use different themes or use the theme roller

enter image description here

copied from here: If you just want to get rid of the up/down arrows, you can wrap the input in an element with a specified width/height and overflow : hidden:

$(".ui-slider-input").wrap($('<div />').css({
    position : 'relative',
    display  : 'inline-block',
    height   : '36px',
    width    : '45px',
    overflow : 'hidden'
}));
Community
  • 1
  • 1
Taifun
  • 6,165
  • 17
  • 60
  • 188
  • from what I have tried the themes only change the input background color. http://jquerymobile.com/demos/1.2.0/docs/forms/forms-themes.html show different themes, however the spin button on the slider text input box is always the light grey. You must use Chrome to view what I am referring to as the spin buttons are not generated in firefox or IE. – Occam Dec 13 '12 at 17:47
  • ok, you are talking about the up-key and down-key buttons to manipulate the slider value which are visible only in Chrome... I have to think about that... – Taifun Dec 13 '12 at 17:59
  • Yeah, I was not sure exactly what to call them, which is also making it hard to try and search for help – Occam Dec 13 '12 at 18:03
  • Thanks for all the responses Taifin, I don't necessarily want to just hide the arrow buttons, but rather color them to match the rest of my theme. Although hiding them I guess will be my plan B – Occam Dec 13 '12 at 18:17
0

Well you can't change the color of the scroll bars/spin button unless they are HTML elements. IE is an exception and allows this, but then again it is not a web standard and not supported anywhere else. As a workaround, you could hide the browser created spin-button and replace it your own custom spin button consisting of DIV tags with appropriate event handlers.

Kent Pawar
  • 2,378
  • 2
  • 29
  • 42
  • I was afraid that it would require some sort of work around. Your suggestion of hiding it then creating my own custom spin box sounds like it might work. – Occam Dec 13 '12 at 19:26
  • Yes, that would ideal as it would be cross-browser compatible and give all users a standard look-n-feel. I did a bit of searching and turns out JQuery mobile will add only in webkit browsers (Chrome/Safari) to make it a spin button.. again this is not supported everywhere (eg. in Gecko browsers like Mozilla).. Here is an example to [disable the spin button](http://stackoverflow.com/questions/3975769/disable-webkits-spin-buttons-on-input-type-number) – Kent Pawar Dec 14 '12 at 05:05