This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 9 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    jqxslider Posts
  • jqxslider #49370

    priyankajain
    Participant

    Hello sir,

    i have used jqxslider in my code and i have define max=32 and min=1 value but i have need shows ticks and values in this order and position 1,2,4,8,16,32.

    how can solve this problem.please tell me.

    Thanks & Regards
    Priyanka jain

    jqxslider #49384

    Dimitar
    Participant

    Hello Priyanka jain,

    This scenario is not supported by jqxSlider. However, you can at least hide the unneeded ticks as shown in the following example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#jqxslider").jqxSlider({ theme: 'summer', value: 2, min: 1, max: 32, mode: "fixed", step: 1, ticksFrequency: 1 });
                    var upperTicks = $("#jqxslider .jqx-slider-tickscontainer:eq(0)").children();
                    var lowerTicks = $("#jqxslider .jqx-slider-tickscontainer:eq(1)").children();
                    for (var i = 0; i < upperTicks.length; i++) {
                        if (i != 0 && i != 1 && i != 3 && i != 7 && i != 15 && i != 31) {
                            $(upperTicks[i]).css("display", "none");
                            $(lowerTicks[i]).css("display", "none");
                        };
                    };
                });
            </script>
            <div id='jqxslider'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxslider #58866

    assaf.frank123
    Participant

    Hi,

    I wanted to use this solution to change the color and width of the ticks in position 0 & 10.
    For some reason – even though the code is executed – and I get the “children” ticks it has no affect on my slider .

    Any idea? (I have several sliders in my page).

    Thanks

    jqxslider #58871

    Dimitar
    Participant

    Hello assaf.frank123,

    Here is how to change the width and colour of the displayed ticks in the example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#jqxslider").jqxSlider({ theme: 'summer', value: 2, min: 1, max: 32, mode: "fixed", step: 1, ticksFrequency: 1 });
                    var upperTicks = $("#jqxslider .jqx-slider-tickscontainer:eq(0)").children();
                    var lowerTicks = $("#jqxslider .jqx-slider-tickscontainer:eq(1)").children();
                    for (var i = 0; i < upperTicks.length; i++) {
                        if (i != 0 && i != 1 && i != 3 && i != 7 && i != 15 && i != 31) {
                            $(upperTicks[i]).css("display", "none");
                            $(lowerTicks[i]).css("display", "none");
                        }
                        else {
                            $(upperTicks[i]).css({ "width": 2, "background-color": "Blue" });
                            $(lowerTicks[i]).css({ "width": 2, "background-color": "Blue" });
                        }
                    };
                });
            </script>
            <div id='jqxslider'>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.