locked
Slider visual problem RRS feed

  • Question

  • Hello,

    Having problem with slider in HTML...

    I'm using a slider in a list and it works but the slider look different in different browsers...why?

    In Iphone (safari) there is a tiny slider that looks like the Jquery slider, In IE it's a bar without a handle. In Android the handle is not round.

    If I use the slider in a dialog window the look is very strange. A big bar with a very large handle........

    Is this a CSS problem or what???

    I'm using:

        var myslider2 = $("<Input id='slidernew2' type='range' value ='0' data-theme='a' data-track-theme='b' min='0' max='3' />");
    
        $(myslider2).appendTo($(element));
    
        myslider2.change(function () {
                    if (contentItem.value != myslider2.val())
                contentItem.value = myslider2.val();

    Is this a bug???? or what.

    Regards

    Sven


    SE1969

    Wednesday, August 29, 2012 3:49 PM

Answers

  • Hi Sven,

    We do have a known issue surrounding sliders (and some of the other theme-related stuff we apply to JQM controls).

    If you do something like this, you'll get something pretty workable:

    $(element).css("width", "300px");
    var $myslider2 = $("<input type='range' data-theme='b' data-track-theme='b' value ='0' min='0' max='100' />");
    $myslider2.appendTo($(element));

    The trick is twofold:  

    First of all, specifying the width of the element field (otherwise the slider wraps to the next line and is tiny)

    Secondly, specifying a non-"a" data theme.  LightSwitch overrides data-theme a with its own styling, but some controls (like the slider) don't respond well to such treatment in the HTML Preview. Thus, the parameters data-theme='b' data-track-theme='b'  help switch to a non-overriden theme.

    See below for a result:

    - Michael

    Wednesday, August 29, 2012 6:36 PM
    Moderator

All replies

  • Hi Sven,

    We do have a known issue surrounding sliders (and some of the other theme-related stuff we apply to JQM controls).

    If you do something like this, you'll get something pretty workable:

    $(element).css("width", "300px");
    var $myslider2 = $("<input type='range' data-theme='b' data-track-theme='b' value ='0' min='0' max='100' />");
    $myslider2.appendTo($(element));

    The trick is twofold:  

    First of all, specifying the width of the element field (otherwise the slider wraps to the next line and is tiny)

    Secondly, specifying a non-"a" data theme.  LightSwitch overrides data-theme a with its own styling, but some controls (like the slider) don't respond well to such treatment in the HTML Preview. Thus, the parameters data-theme='b' data-track-theme='b'  help switch to a non-overriden theme.

    See below for a result:

    - Michael

    Wednesday, August 29, 2012 6:36 PM
    Moderator
  • Thanks

    That was helpful.

    Sven


    SE1969

    Wednesday, August 29, 2012 7:58 PM