<h1>Responsive, Accessible, Alternate Pagination experiment.</h1>
<h3>I'm attempting to make a more interesting and user-friendly pagination</h3>
<p>Drag or use Arrow Keys to set the desired page, then click 'Go' or press 'Enter' (CTRL + Arrow Keys skip by 10.)</p>

  <section class="pagination" role="navigation">
    
    <div id="pageSliderDescription">
      Pagination: "Arrow" keys to move between pages, 
      "Enter" to go to selected page. (ctrl+arrow skips 10).</div>
    <div class="pageSlider long"></div>
    
    <form class="pageForm" action="#">
      
      <label class="pageLabel" for="pageInput">
        Page number you'd like to go to. (Max of 30)
      </label>
      
       <a 
      class="pagePrev pageSkip" 
      href="#?page=6" 
      title="Previous Page (6)">Previous Page</a>
      
      <input id="pageInput" class="pageInput" 
      type="text" maxlength="3" placeholder="#">
      
      <a 
      class="pageNext pageSkip" 
      href="#?page=8" 
      title="Next Page (8)">Next Page</a>
      
      <button class="pageButton" 
      title="Go to chosen page of results">Go</button>
      
    </form>
    
  </section>

@import url("https://fonts.googleapis.com/css?family=Oxygen:400,700");


.pageForm { display: block; margin-top: 14px; }

.pageInput,
.pageButton { 
  padding: 0px 10px; 
  height: 30px; line-height: 30px; 
  border-radius: 3px; border: 1px solid #bbb; 
  display: inline-block; vertical-align: middle; }

.pageInput { 
  width: 28px; height: 28px; 
  box-shadow: inset 1px 2px 1px rgba(0,0,0,0.1); }

.pageLabel { position: absolute; left: -9999em; }

.pageButton { 
  background: linear-gradient( #F46652 0%,#dd5846 100%); 
  border-color: #dd5846; color: white; }

.pageSkip { 
  display: inline-block; background: transparent url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_left_48px-32.png') no-repeat -10px -10px; 
  text-indent: -999em;
  background-size: 40px; opacity: 0.7; 
  vertical-align: middle; width: 20px; height: 20px;
}

.pageNext { background-image: url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-32.png'); }

.pageNumber { 
  position: relative; top: -38px; left: 50%;
  font-size: 12px; color: #333;
  width: 60px; display: block; text-align: center;
  margin-left: -17px;
  background: white; padding: 5px 10px;
  border-radius: 3px;
  box-shadow: 0 0 5px rgba(151, 38, 20,0.15);
  
  &:after {
    
    content: " ";
    display: block; position: absolute;
    width:0; height: 0; top: 24px;
    
    border: 6px solid transparent;
    border-top-color: white;
    
    
  }
}

.pagePip { 
    width: 1px; height: 3px; background: black;
    position: absolute; bottom: -10px; opacity: 0.4;
    box-shadow: -1px 0 0 white;
}

.pageMaxPip, .pageMinPip { 
  font-size: 12px; color: #777; position: absolute; bottom: -30px; width: 20px;
}
.pageMaxPip { right: -10px; }
.pageMinPip { left: -10px; }

.pagination { 
  width: 80%; margin: 50px auto; 
  text-align: center; }

.pageSlider { display: inline-block; }



	.ui-slider-horizontal {
		
		width: 60%; height: 6px; top: 0px;
		margin: 0px 10px 2px; border-radius: 6px;	
		position: relative; display: inline-block; 
		
		background: #F46652;
		background-image: repeating-linear-gradient(28deg, transparent, transparent 10px, #dd5846 10px, #dd5846 20px);
     
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
  
  
    &:before {
		  content: " "; position: absolute;
		  width: auto; height: 16px;
		  top: -5px; left: -4px; right: -4px;
		  border-radius: 10px; z-index: -1;
    
			background: 
      linear-gradient(rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.8) 90%);
		
		}
  
	}


.ui-slider.long .ui-slider-handle {
    
    height: 12px; width: 30px;
		background: #f1f1f1;
		display: block;
		position: absolute;
		border-radius: 50px;
    margin-top: -3px; margin-left: -15px;
		
    text-decoration: none;
  
		background: #f5f5f5;
		background: linear-gradient( #f5f5f5 0%,#cccccc 100%);
		
		box-shadow: 
      0 0 10px 0px rgba(0,0,0,0.35),
      0 0 2px 1px rgba(0,0,0,0.15),
      0 3px 3px rgba(0,0,0,0.2),
      0 7px 5px rgba(0,0,0,0.1),
      0 11px 10px rgba(0,0,0,0.1);
  
  }

  .ui-slider.long .ui-slider-handle::before, 
  .ui-slider.long .ui-slider-handle::after {
		content: " ";
		width: 2px;
		height: 40%;
		position: absolute;
		background: transparent;
		border-radius: 0px;
		box-shadow: -1px 0px 0px rgba(255, 255, 255, 0.8), 1px 0px 0px rgba(255, 255, 255, 0.8), 2px 0 0 rgba(0, 0, 0, 0.3), 1px 0 0 rgba(0, 0, 0, 0.3) inset;
	}
	
	.ui-slider.long .ui-slider-handle::before {
		left: 10px;
		top: 30%;
	}
	
	.ui-slider.long .ui-slider-handle::after {
		right: 12px;
		top: 30%;
	}




@media( max-width: 550px ) {
   
  .pagination { width: auto; }
  .pageForm { display: block; margin-top: 20px; }
  .pageInput { margin: 0; }
  .pageSlider { width: 260px; margin: 0 15px; }
  
}












body { min-height: 400px; padding-top: 20px; background: linear-gradient(#f5f5f5 0%, #dde4e9 100%); font-family: oxygen;
  }

h1,h3 { width: 80%; color: #555; margin: 0 auto; text-align: center; }
h1 { font-size: 26px; }
h3 { color: #777; font-size: 18px; font-weight: normal; }
p { text-align: center; font-size: 14px; color: #111; margin-top: 50px; }
 




#pageSliderDescription { position: absolute; left: -999em; display: inline-block; width: 0; height: 0; }

$(document).ready( function() {
  
  

  var pagesMax = 30;
  var pagesMin = 1;
  var startPage = 7;
  var url = "http://yoursite.com/results?page={{1}}";
  
  $('.pagination .pageSlider').slider({

    value: startPage, max: pagesMax, min: pagesMin,
    animate: true,
    
    create: function( event, ui ) {
      
      $('.pagination .pageSlider .ui-slider-handle').attr({
        "aria-valuenow": startPage,
        "aria-valuetext": "Page " + startPage,
        "role": "slider",
        "aria-valuemin": pagesMin,
        "aria-valuemax": pagesMax,
        "aria-describedby": "pageSliderDescription" 
      });
       
      $('.pagination .pageInput').val( startPage );

    }
  
  }).on( 'slide', function(event,ui) {
      
      // let user skip 10 pages with keyboard ;)
      if( event.metaKey || event.ctrlKey ) {
        
        if( ui.value > $(this).slider('value') ) {
          
          if( ui.value+9 < pagesMax ) { ui.value+=9; } 
          else { ui.value=pagesMax }
          $(this).slider('value',ui.value);
        
        } else {
          
          if( ui.value-9 > pagesMin ) { ui.value-=9; } 
          else { ui.value=pagesMin }
          $(this).slider('value',ui.value);
          
        }
        
        event.preventDefault();
        
      }
      
      $('.pagination .pageNumber span').text( ui.value );
      $('.pagination .pageInput').val( ui.value );
      
  }).on('slidechange', function(event, ui) {
    
      $('.pagination .pageNumber')
        .attr('role','alert')
        .find('span')
        .text( ui.value );
    
      $('.pagination .pageInput').val( ui.value );
      
      $('.pagination .pageSlider .ui-slider-handle').attr({
        "aria-valuenow": ui.value,
        "aria-valuetext": "Page " + ui.value 
      });
    
  });




$('.pagination .pageSlider .ui-slider-handle').on( 'keyup' , function(e) {
  
  if( e.which == 13 ) {
    var curPage = $('.pagination .pageSlider').slider('value');
    alert( 'we would now send you to: ' + url.replace( /{{.}}/ , curPage ));
  }
  
});


$('.pagination .pageInput').on( 'change' , function(e) {
  $('.pagination .pageSlider').slider( 'value', $(this).val() );
});


  
  
  
  var tmr;
  $('.pageSkip').on('click', function(e) {
    
    e.preventDefault();
    
    var $this = $(this);
    
    if( $this.hasClass('pageNext') ) {
      var curPage = $('.pagination .pageSlider').slider('value')+1;
    } else if( $this.hasClass('pagePrev') ) {
      var curPage = $('.pagination .pageSlider').slider('value')-1;
    }
    
    $('.pagination .pageSlider').slider('value',curPage);
    
    clearTimeout(tmr);
    tmr = setTimeout( function() {
      alert( 'we would now send you to: ' + url.replace( /{{.}}/ , curPage ));
    },1000);
    
  });
  
  
  
  

function sliderPips( min, max ) {
  
  var pips = max-min;
  var $pagination = $('.pagination .pageSlider');
 
  for( i=0; i<=pips; i++ ) {

    var s = $('<span class="pagePip"/>').css({ 
      left: '' + (100/pips)*i + '%' 
    });
    
    $pagination.append( s );

  }
  
  var minPip = $('<span class="pageMinPip">'+min+'</span>');
  var maxPip = $('<span class="pageMaxPip">'+max+'</span>');
  $pagination.prepend( minPip, maxPip );
  
};sliderPips( pagesMin, pagesMax );
 

function sliderLabel() {
  $('.pagination .ui-slider-handle').append(
    '<span class="pageNumber">Page <span>' + 
    $('.pagination .pageSlider').slider('value') + 
    '</span></span>');
};sliderLabel();

  
  
  
  
  $('.pagination .pageButton').on('click', function(e) {

    e.preventDefault();
    var curPage = $('.pagination .pageSlider').slider('value');
    alert( 'we would now send you to: ' + 
          url.replace( /{{.}}/ , curPage ));
  
  });
  
  
  
  
  
  
});