// https://codepen.io/ldijkman/pen/XWyBPpG
<!doctype html>
<!--
https://codepen.io/igdanos/pen/JBvOBa<br><br>
https://www.html5tricks.com/jquery-ui-slider-tooltip.html<br>
https://www.html5tricks.com/demo/jquery-ui-slider/index.html<br><br>
maybe this is an early version 0.1 of<br>
https://github.com/simeydotme/jQuery-ui-Slider-Pips<br>
<pre>
Visual MultiRange Scheduler, irrigation scheduler, light scheduler, sprinkler scheduler, wifi timer switch scheduler
i am looking at how the scale is created, style left:??%;
think i do not like the scale cq selection filling of mrs slider
https://plnkr.co/edit/0VOS27JydW81wwZc
-->
<html>
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<!--
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>-->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<h1>jQuery UI Slider - with pips/points</h1>
<br><br>
<div class="slider"><!--div slider--><br><br><br></div>
<div class="slider2"> <br><br><br></div>
<div class="slider3"> <br><br><br></div><br><br>
<div class="slider4"> <br><br><br></div>
<div class="slider5"> <br><br><br></div>
<div class="slider6"> <br><br><br></div></div><br><br>
<div>
mine dive to make a ruler like scale div
<div class="mine" style="position:relative;width:100%;color:green;background-color:yellow;height:50px;top:25px;"><br><!--div mine--></div></div>
</div>
https://codepen.io/igdanos/pen/JBvOBa<br><br>
https://www.html5tricks.com/jquery-ui-slider-tooltip.html<br>
https://www.html5tricks.com/demo/jquery-ui-slider/index.html<br><br>
maybe this is an early version 0.1 of<br>
https://github.com/simeydotme/jQuery-ui-Slider-Pips<br>
<pre>
Visual MultiRange Scheduler, irrigation scheduler, light scheduler, sprinkler scheduler, wifi timer switch scheduler
i am looking at how the scale is created, style left:??%;
think i do not like the scale cq selection filling of mrs slider
</pre><a href="https://plnkr.co/edit/0VOS27JydW81wwZc" target="schedule">https://plnkr.co/edit/0VOS27JydW81wwZc</a><br><br><br>
</div>
</body>
</html>
/*
https://codepen.io/ldijkman/pen/XWyBPpG
https://codepen.io/igdanos/pen/JBvOBa
*/
.ui-slider-pips .ui-slider-pip {
width: 2em; height: 1em; line-height: 1em; position: absolute;
font-size: 0.8em; color: #bababa; overflow: visible; text-align: center;
top: -25px; left: 20px; margin-left: -1em; cursor: pointer;
}
.ui-slider-pips .ui-slider-line { background: #bababa; width: 1px; height: 8px; position: absolute; left: 50%; }
.ui-slider-pips .ui-slider-number { position: absolute; top: -15px; left: 50%; margin-left: -1em; width: 2em; }
.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-handle {
}
/* ------------------------- */
/* demo stuff */
body { font-family: 'bitter'; padding: 20px 50px;
text-align:center;
/*
background: url('https://www.zdnet.com/a/img/resize/df093294bb76ff4070947fd7a31c68cd03f578f1/2019/04/21/9d791bf2-9b20-476a-bba6-201e622d2a1f/jquery-logo-blue.png?auto=webp&width=1280');
background-size: cover;
opacity
color: white; */
}
h1,h3 { margin: 0 0 10px ; }
h3 { font-weight: 200; margin-bottom: 10px; }
h4 { font-weight: 300; font-style: italic; color: black; padding: 10px 20px;
background: rgba(255,255,255,0.7); display: inline-block; border-radius: 4px; }
a { color: #2cafe3; }
.ui-slider-horizontal { height: 4px; background: #358d48; }
.ui-slider-horizontal .ui-slider-handle { height: 15px; width: 15px; background: #fff; border: 3px solid #BCABA4; border-radius:50%; margin-left: -14px; margin-top:-3px; cursor: pointer; }
@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; }
}
.mine { height: 40px; background: #45a059; }
/* ui slider pips */
.ui-slider-horizontal.ui-slider-pips {
margin-bottom: 2.8em;
}
.ui-slider-pips .ui-slider-number,
.ui-slider-pips .ui-slider-pip-hide {
display: block;
}
.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;
top:-30px;
position: absolute;
left: 50%;
}
.mine-line {
background: #999;
width: 2px;
height: 30px;
top:-30px;
position: absolute;
left:50%;
}
.ui-slider-number {
position: absolute;
top: 5px;
left: 50%;
margin-left: -1em;
width: 2em;
}
.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;
}
.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: absolute;
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;
}
/*
https://codepen.io/ldijkman/pen/XWyBPpG
https://codepen.io/igdanos/pen/JBvOBa<br><br>
https://www.html5tricks.com/jquery-ui-slider-tooltip.html<br>
https://www.html5tricks.com/demo/jquery-ui-slider/index.html<br><br>
maybe this is an early version 0.1 of<br>
https://github.com/simeydotme/jQuery-ui-Slider-Pips<br>
<pre>
Visual MultiRange Scheduler, irrigation scheduler, light scheduler, sprinkler scheduler, wifi timer switch scheduler
i am looking at how the scale is created, style left:??%;
think i do not like the scale cq selection filling of mrs slider
https://plnkr.co/edit/0VOS27JydW81wwZc
*/
var points = 96;
var doitonce;
/* 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;
// for every stop in the slider, we create a pip.
for( i=0; i<=pips; i=i+4 ) {
// hold a span element for the pip
var s = $('<span class="ui-slider-pip">\n<span class="ui-slider-line"></span><span class="ui-slider-number">'+i/4+'</span></span>');
var mine = "";//$('<span class="ui-slider-pip">\n<span class="ui-slider-line"></span><span class="ui-slider-number">'+i/4+'</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).toFixed(1) + '%' });
console.log('left ',((100/pips)*i).toFixed(1) ,'%'); // 1 decimals
}else{
s.css({ top: '' + (100/pips)*i + '%' });
}
// append the span to the slider. add it to slider div
//$("#mine").append( mine );
this.element.append( s );
/* result
<span class="ui-slider-pip" style="left: 25%;">
<span class="ui-slider-line"></span>
<span class="ui-slider-number">6</span>
</span>
*/
}
if(doitonce !=1 ){
for( i=0; i<=pips; i=i+1 ) {
var number;
if(i%4==0)number=i/4;
if(i%4==1)number="";
if(i%4==2)number="";
if(i%4==3)number="";
// hold a span element for the pip
//var s = $('<span class="ui-slider-pip">\n<span class="ui-slider-line"></span><span class="ui-slider-number">'+i/4+'</span></span>');
var mine = $('\n\n<span class="mine-pip">\n<span class="mine-line" ></span>\n<span class="ui-slider-number" style="position:absolute;">'+number+'</span>\n</span>\n');
// 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 ) {
mine.addClass('ui-slider-pip-first');
if( "number" == options.first ) { mine.addClass('ui-slider-pip-number');}
//if( false == options.first ) { mine.addClass('ui-slider-pip-hide'); }
} else if ( pips == i ) {
s.addClass('ui-slider-pip-last');
if( "number" == options.last ) { mine.addClass('ui-slider-pip-number'); }
//if( false == options.last ) { mine.addClass('ui-slider-pip-hide'); }
} else {
if( "number" == options.rest ) { mine.addClass('ui-slider-pip-number'); }
//if( false == options.rest ) { mine.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" ){
mine.css({ left: '' + ((100/pips)*i).toFixed(1) + '%' });
mine.css({ position: 'absolute' });
var temp=i % 4;
console.log('temp',temp); // this works
// this not
if(temp==0){$('.mine-line').css('height','15px') ;}
if(temp==1){$('.mine-line').css('height','10px');}
if(temp==2){$('.mine-line').css('height','5px');}
if(temp==3){$('.mine-line').css('height','20px');}
if(i%4==0)$('.mine-line').css({ top: '-25px' });
if(i%4==1)mine.css({ top: '34px' });
if(i%4==2)mine.css({ top: '32px' });
if(i%4==3)mine.css({ top: '34px' });
if((i%4)==3){$('.mine-line').css({ width:'3px' });}else{$('.mine-line').css({ width:'1px' });}
console.log('left ',((100/pips)*i).toFixed(1) ,'%'); // 1 decimals
//}else{
//s.css({ top: '' + (100/pips)*i + '%' });
//}
// append the span to the slider. add it to slider div
$(".mine").append( mine );
/* result
<span class="ui-slider-pip" style="left: 25%;">
<span class="ui-slider-line"></span>
<span class="ui-slider-number">6</span>
</span>
*/
doitonce=1;
}
}
}
};
$.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 = [
$('<span class="ui-slider-tip">'+ this.options.values[0]+'</span>'),
$('<span class="ui-slider-tip">'+ this.options.values[1]+'</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-tip').text( ui.value );
});
}
};
$.extend(true, $['ui']['slider'].prototype, extensionMethods);
})(jQuery);
/* ------------------------- */
/* demo stuff */
$(document).ready(function() {
$('.slider, .slider2').slider({min:0,max:points,animate:true, value:3});
$('.slider3').slider({min:0,max:points,animate:true,range:true, values:[2,18]});
$('.slider').slider('pips');
$('.slider2').slider('pips', {rest:'number'});
$('.slider3').slider('pips', {first:'pip', last: 'pip'});
$('.slider4').slider({min:0,max:points,animate:true,value:4});
$('.slider6').slider({min:0,max:points,animate:true,range: true,values:[3,6] });
$('.slider4').slider('pips');
$('.slider4, .slider6').slider('float');
});