slider pips defaults

for use on github issues.

by Ayyappan Sakthivadivel

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://rawgit.com/simeydotme/jQuery-ui-Slider-Pips/master/src/js/jquery-ui-slider-pips.js"></script>
<link rel="stylesheet" href="https://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/css/jqueryui.min.css">
<link rel="stylesheet" href="https://rawgit.com/simeydotme/jQuery-ui-Slider-Pips/master/dist/jquery-ui-slider-pips.css">
<div id="pips-slider">
    
</div>

CSS

.ui-state-focus, 
.ui-widget-content .ui-state-focus, 
.ui-widget-header .ui-state-focus,
.ui-state-hover, 
.ui-widget-content .ui-state-hover, 
.ui-widget-header .ui-state-hover,
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
  background: #2b2b2b;
  border-color: transparent;
}
                    
.ui-slider .ui-slider-pip-initial-1 .ui-slider-label {
  color: #E80949; }
                    
.ui-slider .ui-slider-pip-initial-2 .ui-slider-label {
  color: #920AFF; }











body {
    
    padding: 30px;
    
}

JavaScript

$(function() {
    
    $("#pips-slider")
    
        .slider({
        
            range: true,
            min: 0,
            max: 20,
            values: [ 4, 16 ],
        	step: 1
        
        })
    
        .slider("pips", {
        	
        	first: "label",
        	last: "label",
            rest: "label",
        	step: 5,
        	labels: false,
        	prefix: "",
        	suffix: ""
        
        })
    
    	.slider("float", {
        	
        	handle: true,
        	pips: false,
        	labels: false,
        	prefix: "",
        	suffix: ""
        
    	});

});