Home Forums Porto Admin Template slider navigator

This topic contains 3 replies, has 2 voices, and was last updated by  ostrica 1 week ago. This post has been viewed 46 times

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

    ostrica
    Participant

    I want to put a arrow left and right to adjust the slider

    <div class="form-group">
                                                    <div class="col-md-12">
                                                        <label class="control-label text-color-dark h3">Eerste inleg</label>
                                                        <div class="m-md slider-primary" data-plugin-slider data-plugin-options='{ "value": 0, "range": "min", "max": 25000, "step" : 100 }' data-plugin-slider-output="#listenSlider">
                                                            <input id="listenSlider" runat="server" type="hidden" value="0" />
                                                        </div>
                                                        <p class="output pull-lg-right h2 mt-none pr-lg"><b class="out">0</b></p>
                                                    </div>
                                                </div>

    #10023480

    ostrica
    Participant

    to clarify i want a slider range to have a button left and right to adjust slider range.


    #10023483

    Support2
    Keymaster

    Hello,

    Porto don’t come with this feature.
    But you can make with custom code, in that case my suggestion for is to initialize the slider plugin manually. For it follow the steps:

    1) HTML:

    <div class="form-group">
        <div class="col-md-12">
            <label class="control-label text-color-dark h3">Eerste inleg</label>
            <div class="m-md slider-primary">
                <input id="listenSlider" runat="server" type="hidden" value="0" />
            	<p class="output pull-lg-right h2 mt-none pr-lg"><b class="out">0</b></p>
            </div>
            
            <a class="btn btn-primary button-decrease">DECREASE</a>
            <a class="btn btn-primary button-increase">INCREASE</a>
        </div>
    </div>

    2) Add in (theme.custom.js):

    var slider =  $( "#listenSlider" ).parent().slider({
        value:5,
        min: 0,
        max: 20000,
        step: 50,
        animate: true,
        range: 'min',
        slide: function( event, ui ) {
            if ( !ui.values ) {
    			$( "#listenSlider" ).val( ui.value );
    		} else {
    			$( "#listenSlider" ).val( ui.values[ 0 ] + '/' + ui.values[ 1 ] );
    		}
    
    		$( "#listenSlider" ).trigger('change');
        }
    });
    
    $('.button-increase').click(function() {
    
    	if( $( "#listenSlider" ).val() < parseInt( slider.slider( "option", "max" ) ) ) {
    		slider.slider('value', slider.slider('value') + slider.slider( "option", "step" ) );
    		$( "#listenSlider" ).val( parseInt( $( "#listenSlider" ).val() ) + parseInt( slider.slider( "option", "step" ) ) );
    		$('.output b').text( $( "#listenSlider" ).val() );
    		$( "#listenSlider" ).trigger('change');	
    	}
    	
    });
    
    $('.button-decrease').click(function() {
    
    	if( $( "#listenSlider" ).val() > 0 ) {
    		slider.slider('value', slider.slider('value') - slider.slider( "option", "step" ) );
    		$( "#listenSlider" ).val( parseInt( $( "#listenSlider" ).val() ) - parseInt( slider.slider( "option", "step" ) ) );
    		$('.output b').text( $( "#listenSlider" ).val() );
    		$( "#listenSlider" ).trigger('change');
    	}
    
    });

    Kind Regards,

    Rodrigo.


    #10023486

    ostrica
    Participant

    It works!!!
    Thanks your’e the best!!!!


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