Home Forums Porto Admin Template Slider Decimal Values?

This topic contains 4 replies, has 2 voices, and was last updated by  Support2 2 weeks ago. This post has been viewed 92 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10023540

    Anthony2oo5
    Participant

    Hi, I have looked on the creators website but the documentation isnt very good.

    Is it possible to get a slider (Touch Punch) that does half values?

    I want to allow my users to pick a time range, with increments of half hours rather than whole numbers only?

    I know there is time pickers but I am trying to get opening hours to a store and and dont want to ahve 14 time pickers.



    Template Version: Bootstrap 3
    #10023544

    Support2
    Keymaster

    Hello,

    Sorry but unfortunately Porto Admin doesn’t have this feature at moment.
    But i finded this codepen on google that can help you, seems to be exactly what you need:
    https://codepen.io/caseymhunt/pen/kertA
    * Change the step option to 30 and you will get a slider range incrementing by half hours.

    This codepen code also uses the jQuery UI Slider (the same used on Porto Admin), so you just need to implement the code in your project.

    I hope that helps you.

    Kind Regards,

    Rodrigo.


    • This reply was modified 2 weeks, 6 days ago by  Support2.
    #10023631

    Anthony2oo5
    Participant

    Thanks very much


    #10023632

    Anthony2oo5
    Participant

    Hi, sorry I cant get multiple sliders on one page with that one can I?


    #10023654

    Support2
    Keymaster

    Hello,

    Change the code of codepen to:

    HTML:

    <div class="time-range">
       <div class="sliders_step1">
            <div class="slider-range"></div>
              <p>Time Range: <span class="slider-time">9:00 AM</span> - <span class="slider-time2">5:00 PM</span></p>
        </div>
    </div>
    
    <div class="time-range">
       <div class="sliders_step1">
            <div class="slider-range"></div>
              <p>Time Range: <span class="slider-time">9:00 AM</span> - <span class="slider-time2">5:00 PM</span></p>
        </div>
    </div>

    JS:

    $(".slider-range").slider({
        range: true,
        min: 0,
        max: 1440,
        step: 15,
        values: [540, 1020],
        slide: function (e, ui) {
            var hours1 = Math.floor(ui.values[0] / 60);
            var minutes1 = ui.values[0] - (hours1 * 60);
    
            if (hours1.length == 1) hours1 = '0' + hours1;
            if (minutes1.length == 1) minutes1 = '0' + minutes1;
            if (minutes1 == 0) minutes1 = '00';
            if (hours1 >= 12) {
                if (hours1 == 12) {
                    hours1 = hours1;
                    minutes1 = minutes1 + " PM";
                } else {
                    hours1 = hours1 - 12;
                    minutes1 = minutes1 + " PM";
                }
            } else {
                hours1 = hours1;
                minutes1 = minutes1 + " AM";
            }
            if (hours1 == 0) {
                hours1 = 12;
                minutes1 = minutes1;
            }
    
    
    
             $(this).parent().find('.slider-time').html(hours1 + ':' + minutes1);
    
            var hours2 = Math.floor(ui.values[1] / 60);
            var minutes2 = ui.values[1] - (hours2 * 60);
    
            if (hours2.length == 1) hours2 = '0' + hours2;
            if (minutes2.length == 1) minutes2 = '0' + minutes2;
            if (minutes2 == 0) minutes2 = '00';
            if (hours2 >= 12) {
                if (hours2 == 12) {
                    hours2 = hours2;
                    minutes2 = minutes2 + " PM";
                } else if (hours2 == 24) {
                    hours2 = 11;
                    minutes2 = "59 PM";
                } else {
                    hours2 = hours2 - 12;
                    minutes2 = minutes2 + " PM";
                }
            } else {
                hours2 = hours2;
                minutes2 = minutes2 + " AM";
            }
    
            $(this).parent().find('.slider-time2').html(hours2 + ':' + minutes2);
        }
    });

    Kind Regards,

    Rodrigo.


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