jQuery UI Widgets › Forums › Editors › ScrollBar, Slider, BulletChart, RangeSelector › jqxslider

Tagged: , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    jqxslider Posts
  • February 12, 2014 at 10:06 am 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

    February 12, 2014 at 11:52 am 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/

    August 28, 2014 at 7:06 am 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

    August 28, 2014 at 7:47 am 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/

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

You must be logged in to reply to this topic.