jquery-ui滑块组件：纵向展示，自定义添加滑块点，可移除滑块点，滑块点数据右侧动态展示，两测tooltip展示。
逄俊力
/* jquery slider pips plugin, version 0.1 */
(function($) {
var extensionMethods = {
pips: function( settings ) {
options = {
first: "number", // "pip" , false
last: "number", // "pip" , false
rest: "pip" // "number" , false
};
$.extend( options, settings );
// get rid of all pips that might already exist.
this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();
// we need teh amount of pips to create.
var pips = this.options.max - this.options.min;
console.log('this.options',this.options,this.options.min,this.options.max);
var start = this.options.min;
var end = this.options.max;
for( i = start; i<=end; i++ ) {
// hold a span element for the pip
var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+i+'</span></span>');
// add a class so css can handle the display
// we'll hide numbers by default in CSS, and show them if set.
// we'll also use CSS to hide the pip altogether.
if( 0 == i ) {
s.addClass('ui-slider-pip-first');
if( "number" == options.first ) { s.addClass('ui-slider-pip-number'); }
// if( false == options.first ) { s.addClass('ui-slider-pip-hide'); }
} else if ( pips == i ) {
s.addClass('ui-slider-pip-last');
if( "number" == options.last ) { s.addClass('ui-slider-pip-number'); }
// if( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
} else {
if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
// if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
}
// if it's a horizontal slider we'll set the left offset,
// and the top if it's vertical.
if( this.options.orientation == "horizontal" )
s.css({ left: '' + (100/pips)*i + '%' });
else
s.css({ top: '' + (100/pips)*i + '%' });
// append the span to the slider.
this.element.append( s );
}
}
};
$.extend(true, $['ui']['slider'].prototype, extensionMethods);
})(jQuery);
(function($) {
var extensionMethods = {
float: function( settings ) {
options = {};
$.extend( options, settings );
// add a class for the CSS
this.element.addClass('ui-slider-float');
// if this is a range slider
if( this.options.values ) {
var $tip=[]
let left = true;
for(var i=0;i<this.options.values.length;i++){
let value = this.options.values[i];
if(left==true){
$tip.push($('<div class="sliseItemWrapper"><span class="ui-slider-tip1">'+ value+'</span><div class="deleteSlide" onclick="deleteSlide('+ i +')">移除</div></div>'));
left=false;
}else{
$tip.push($('<div class="sliseItemWrapper2"><div class="deleteSlide" onclick="deleteSlide('+ i +')">移除</div><span class="ui-slider-tip1">'+ value+'</span></div>'));
left=true;
}
}
// var $tip = [
// $('<span class="ui-slider-tip">'+ this.options.values[0]+'</span>'),
// $('<span class="ui-slider-tip">'+ this.options.values[1]+'</span>'),
// $('<span class="ui-slider-tip">'+ this.options.values[2]+'</span>')
//
// ];
// else if its just a normal slider
} else {
// create a tip element
var $tip = $('<span class="ui-slider-tip">'+ this.options.value+'</span>');
}
// now we append it to all the handles
this.element.find('.ui-slider-handle').each( function(k,v) {
$(v).append($tip[k]);
});
// if this slider also has numbers, we'll make those into tips, too; by cloning and changing class.
this.element.find('.ui-slider-number').each(function(k,v) {
var $e = $(v).clone().removeClass('ui-slider-number').addClass('ui-slider-tip-number');
$e.insertAfter($(v));
});
// when slider changes, update handle tip value.
this.element.on('slidechange slide', function(e,ui) {
$(ui.handle).find('.ui-slider-tip1').text( ui.value );
});}
};
$.extend(true, $['ui']['slider'].prototype, extensionMethods);
})(jQuery);
//初始化滑块
$(document).ready(function() {
$('.slideStart')[0].innerText=slideStart;
$('.slideEnd')[0].innerText=slideEnd;
var valuesArr=[];
for(var i=0;i<10;i++){
valuesArr.push(slideEnd);
}
$('.slider').slider({orientation: "vertical",range: "max", min:slideStart,max:slideEnd,animate:true,values:valuesArr,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}});
$('.slider').slider('pips');
$('.slider').slider('float');
$( "#amount" ).val( $( ".slider" ).slider( "values" ) );
});
var pageShowslideArr=[]; //全局变量
//点击添加 滑块
$(".slideAmountAdd").on("click",function(){
var currentSArr = JSON.parse(JSON.stringify($('.slider').slider( 'values')));
var slideAmountStr = $("#slideAmount").val();
var slideAmountArr=slideAmountStr.split(',');
slideAmountArr.forEach(function(ele){
console.log(Number.isInteger(Number(ele))==true , Number(ele)>= Number(slideStart) , Number(ele)<= Number(slideEnd));
if(Number.isInteger(Number(ele))==true && Number(ele)> Number(slideStart) && Number(ele)< Number(slideEnd)){
currentSArr.unshift(Number(ele));
}else{
$(".slideAmountError")[0].innerHTML='添加内容不正确';
}
});
if(currentSArr.length>10){
var reRenderArr= currentSArr.sort(function(a,b){return a>b?1:-1}).slice(0,11);
console.log('reRenderArr',reRenderArr,reRenderArr[reRenderArr.length-1],slideEnd);
if(reRenderArr[reRenderArr.length-1]!=slideEnd){ //不存在最后的值了，说明用完了
$(".slideAmountError")[0].innerHTML='不能超过10个拆包点';
}else{
$(".slideAmountError")[0].innerHTML='';
$('.slider').slider( 'values' , reRenderArr);
}
slidechange();
}
});
//点击滑杆滑动
$("#slider-vertical").on("click",function(){
slidechange();
});
//拖动滑块滑动
$(document).on('mousemove.drag', '.ui-slider-handle', '#slider-vertical', function (e) {
slidechange();
});
$('.slider').bind('slidestop', function(event, ui) {
// console.log(11,event,ui.values)
//$('.slider').slider( 'values' , ui.values.sort(function(a,b){return a>b?1:-1}));
});
function slidechange(){
$.each($('.ui-slider-tip1'),function(index,item){
if(item.innerHTML!=String(slideEnd)){
$(".deleteSlide")[index].style.color='#1890ff';
$(".ui-slider-tip1")[index].style.color='#222';
}else{
$(".deleteSlide")[index].style.color='#fff';
$(".ui-slider-tip1")[index].style.color='#fff';
}
});
$(".showNumber")[0].innerHTML='加载中...';
var showArrEnd = [];
$.each($('.ui-slider-tip1'),function(index,item){
if(item.innerHTML!=String(slideStart) && item.innerHTML!=String(slideEnd)){
showArrEnd.push(item.innerHTML);
}
});
var dataString='';
dataString=slideStart+"~";
var SortArr = showArrEnd.sort();
//去重
var lastArr = [];
SortArr.forEach(function (item) {
if (lastArr.indexOf(item) == -1) {
lastArr.push(item);
}
});
pageShowslideArr=lastArr;
lastArr.forEach(function(ele){
dataString=dataString+ele+','+Number(Number(ele)+1)+'~';
});
dataString= dataString + slideEnd;
var pageShowslideAr = dataString.split(',');
var pageShowslideSt='';
pageShowslideAr.forEach(function (ele) {
let splitAr= ele.split('~'); //判断255~255的情况 [244,255,256]
if(splitAr[0]==splitAr[1]){
ele=splitAr[0];
};
pageShowslideSt=pageShowslideSt+ ele +"<br/><br/>";
});
$(".showNumber")[0].innerHTML=pageShowslideSt;
};
function deleteSlide(index){
$.each($('.ui-slider-tip1'),function(index,item){
if(item.innerHTML==String(slideEnd)){
$(".deleteSlide")[index].style.color='#fff';
}
});
var currentSArr = JSON.parse(JSON.stringify($('.slider').slider( 'values')));
let afterDeleteArr=[];
currentSArr.forEach(function(ele){
console.log(String(ele),$(".ui-slider-tip1")[index].innerText,String(ele)==$(".ui-slider-tip1")[index].innerText);
if(String(ele)==$(".ui-slider-tip1")[index].innerText){
afterDeleteArr.push(slideEnd);
}else{
afterDeleteArr.push(ele);
}
});
$('.slider').slider( 'values' , afterDeleteArr);
}
/*@import url('http://fonts.googleapis.com/css?family=Bitter:400,700,400italic');*/
/* ui slider pips */
.ui-slider-pips .ui-slider-number,
.ui-slider-pips .ui-slider-pip-hide {
display: none;
}
.ui-slider-pips .ui-slider-pip-number .ui-slider-number {
display: block;
}
.ui-slider-pips .ui-slider-pip {
width: 2em;
height: 1em;
line-height: 1em;
position: absolute;
font-size: 0.8em;
color: #999;
overflow: visible;
text-align: center;
top: 20px;
left: 20px;
margin-left: -1em;
cursor: pointer;
}
.ui-slider-pips .ui-slider-line {
background: #999;
width: 1px;
height: 3px;
position: absolute;
left: 50%;
}
.ui-slider-pips .ui-slider-number {
position: absolute;
top: 5px;
left: 50%;
margin-left: -1em;
width: 2em;
}
.ui-slider-pip:hover .ui-slider-number {
color: white;
font-weight: bold;
}
.ui-slider-vertical.ui-slider-pips {
margin-bottom: 0;
margin-right: 2em;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
text-align: left;
top: 20px;
left: 20px;
margin-left: 0;
margin-top: -0.5em;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-line {
width: 3px;
height: 1px;
position: absolute;
top: 50%;
left: 0;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-number {
top: 50%;
left: 0.5em;
margin-left: 0;
margin-top: -0.5em;
width: 2em;
}
.ui-slider-vertical.ui-slider-pip:hover .ui-slider-number {
color: white;
font-weight: bold;
}
.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-number {
position: absolute;
visibility: hidden;
top: -40px;
display: block;
/*width: 34px;*/
margin-left: -17px;
left: 50%;
height: 20px;
line-height: 20px;
background: white;
border-radius: 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 12px;
opacity: -1;
transition: all 0.4s ease;
color: #333;
padding: 3px;
}
.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number {
opacity: 0.9;
top: -30px;
color: #333;
visibility: visible;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-number {
top: 15px;
}
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-number {
top: 5px;
font-weight: normal;
}
.ui-slider-float .ui-slider-tip:after,
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {
content: " ";
width: 0;
height: 0;
border: 5px solid rgba(255, 255, 255, 0);
border-top-color: #ffffff;
position: re;
bottom: -10px;
left: 50%;
margin-left: -5px;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-number:after {
border: 5px solid rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
top: -10px;
}
a {
color: #2cafe3;
}
.slideWrapper {
/*border: 1px dotted rgba(200, 200, 255, 0.6);*/
/*background: rgba(0, 10, 20, 0.7);*/
border-radius: 10px;
position: relative;
padding:40px 100px 0 193px;
}
.slideStart{
position: absolute;
top: 468px;
}
.slideEnd{
position: absolute;
top: 10px;
}
.ui-slider {
box-shadow: inset 0 2px 1px #aaa;
border-color: #000;
}
.ui-slider-horizontal {
height: 10px;
background: #ddd;
}
.ui-slider-horizontal .ui-slider-handle {
height: 18px;
width: 14px;
background: #2cafe3;
border: 1px solid rgba(0, 0, 0, 0.6);
margin-left: -8px;
cursor: pointer;
}
.ui-slider-horizontal.green .ui-slider-handle {
background: #afe32c;
}
@media (max-width: 700px) {
.ui-slider-pip:nth-child(odd) .ui-slider-number {
display: none;
}
}
@media (max-width: 400px) {
.ui-slider-pip:nth-child(2n+1) .ui-slider-number {
display: none;
}
.ui-slider-pip:nth-child(4n) .ui-slider-number {
display: none;
}
}
.showNumber{
text-align: center;
margin-top: -18px;
height:30px;
}
.ui-slider-pip{
display: none;
}
.ui-slider-tip1{
/*line-height: 20px;*/
/*background: white;*/
/*border-radius: 3px;*/
/*box-shadow: 0 0 3px rgba(0,0,0,0.4);*/
text-align: center;
font-size: 10px;
color: #fff;
padding: 0 3px;
}
.ui-slider-vertical{
height:420px;
}
.sliseItemWrapper{
position: absolute;
top: -3px;
left:18px;
background: white;
display:flex;
background: transparent;
}
.sliseItemWrapper2{
position: absolute;
top: -3px;
right:19px;
background: white;
display:flex;
background: transparent;
}
.deleteSlide{
display: block;
width:35px;
font-size:10px;
color:#fff;
padding-left:5px;
}<input id="slideAmount" style="width:400px;margin: 15px 0 10px 42px;"/> <button class="slideAmountAdd">添加</button>
<span class="slideAmountError" style="font-size:10px;color:red"></span>
<div style="height:500px;" class="slideWrapper">
<span class="slideStart"></span>
<div id="slider-vertical" class="slider"></div>
<span class="slideEnd"></span>
</div>
var slideStart = 1
var slideEnd = 100
类似资料：