We Keep Coding

How to change format of Date constructor in my date range slider

I'm currently using jquery ui slider plugin to set a range between two dates. I need the date output to be YYYY-MM-DD instead of fully written out like Mon Nov 29, 2021.
I'm using this function I found on codepen to convert the default jquery range slider into a date range slider between two dates. Right now the output of the dates is written out fully like I showed above. I need it to be in the format of YYYY-MM-DD. I tried changing min, max and the values options to new Date().toISOString().slice(0, 10), but it gave me an invalid date error. If anyone knows how to change the date format to be YYYY-MM-DD, it would be greatly appreciated!
$(function() {
$( "#slider-range" ).slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2014.01.01').getTime() / 1000,
step: 86400,
values: [ new Date('2013.01.01').getTime() / 1000, new Date('2013.02.01').getTime() / 1000 ],
slide: function( event, ui ) {
$( "#amount" ).val( (new Date(ui.values[ 0 ] *1000).toDateString() ) + " - " + (new Date(ui.values[ 1 ] *1000)).toDateString() );
}
});
$( "#amount" ).val( (new Date($( "#slider-range" ).slider( "values", 0 )*1000).toDateString()) +
" - " + (new Date($( "#slider-range" ).slider( "values", 1 )*1000)).toDateString());
});
Heres a link to the codepen I'm going off of.
https://codepen.io/2rod/pen/JtIki

Google Analytics Event Tracking on JqueryUI Range Slider

So I have a simple JQuery UI range slider with two handles, as shown in this JSFiddle.
HTML
<p class="results-val">
<span class="min-val">0 </span>to
<span class="max-val"> 30</span> days
</p>
<div id="slider"></div>
JS
$(function(){
$( "#slider" ).slider({
range: true,
min: -60,
max: 60,
step: 5,
values: [ 0, 30 ],
slide: function(event, ui) {
$(".min-val").text(ui.values[0] + " ");
$(".max-val").text(" " + ui.values[1]);
}
});
});
In practice, this slider acts as a filter for our Dashboard application, scoping data shown regarding the user's results based on the range of day values.
Via Google Analytics, we want to track different permutations of handle positions. For clarity, when I say permutations, this is what I mean:
"0 to 30 days" is one permutation.
"-5 to 15 days" is another permutation.
"-40 to 0 days" is another permutation.
And so there are tons of permutations.
My idea for this is to have two events, one for each slider handle, with the handle's current step position as the value being passed:
Category: Filtering,
Action: Adjustment,
Label: leftHandle,
Value: stepPos
Category: Filtering,
Action: Adjustment,
Label: rightHandle,
Value: stepPos
However, there's a problem here. While this approach will indeed report an Average Value for each handle individually, we want to see both values together. As stated above, it's important for us to know the most popular "permutations", with a single permutation consisting of both a left handle position value and a right handle position value.
If anyone has suggestions on how to set this logic, that would be wonderful. Thank you.

You can stuff both values into a comma separated string
You can debounce the slider event to only record values that the user keeps for more than a second or two.
var globalLeft, globalRight;
$(function(){
$( "#slider" ).slider({
range: true,
min: -60,
max: 60,
step: 5,
values: [ 0, 30 ],
slide: function(event, ui) {
$(".min-val").text(ui.values[0] + " ");
$(".max-val").text(" " + ui.values[1]);
globalLeft = ui.values[0];
globalRight = ui.values[1];
$.debounce(1300, doPingGa)
}
});
});
function doPingGa() {
ga('send', 'event', 'Filtering', 'RangeAdjust', globalLeft+','+globalRight);
}

jQuery ui spinner percentage calculation

I have one jquery ui spinner input where it shows values from 0% to 100% with increment of 10.
which is fine. I am trying to add some additional function.
Here is what I am wanting: In my spinner field my value can be anything from 0% to 100% and if
I start increasing or decreasing value it should display How much is remaining from the 100%.
Like if I make my value 40% in spinner than in the text beside the input field should display 60% remaining. Is this possible to make ? Thanks in advance and sorry for my bad English.
JS FIDDLE EXAMPLE
js
$("#spinner").spinner({
min: 0,
max: 100,
step: 10
});
HTML
<input id="spinner" value="0"/>
<p class="right totalResult">100% Remaining</p>

Sure, one easy way would be to wrap the 100 in a span and use this jQuery:
$("#spinner").spinner({
min: 0,
max: 100,
step: 10,
spin: function (e, ui) {
$('p.right.totalResult span').text(100-ui.value)
}
});
jsFiddle example

Try this code
$("#spinner").spinner({
min: 0,
max: 100,
step: 10,
spin: function( event, ui ) {
var remain = 100 - ui.value;
$(".totalResult").html(remain + "% Remaining");
}
});
DEMO

You need to add an event listener for the spin(when it goes up or down).
You can do it like below:
$("#spinner").spinner({
min: 0,
max: 100,
step: 10
}).on("spin",function(event, ui){
$(".right").text((100 - ui.value) + "% Remaining")
});
I hope this helps!

jquery vertical slider handle not moving

I am using jquery slider as vertical orientation bt vertical slider handle not moving.Please help, i know i am missing something obvious.
--Demo here--
$( ".slider" ).slider({
animate: true,
orientation:"vertical",
range: "min",
value: 50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$("#slider-result").html( ui.value );
}
});

DEMO
I've simply removed top: -3px;
from .ui-slider-handle
If you want to set the start position of a slider to the top, use value parameter in your slider function (value = 100).

Just Remove top:-3px; in .ui-slider-handle.

how to move slider as video is being moved

I am doing a customized control bar. right now i am working on seek bar .i am able to play video on that particular time as the seek bar is moved . Now i need to do the vice versa that is . when my video is being played seekbar should automatically move
i got tired of searching through google .
i know there are great number of intelligent people are in stack overflow .
help me ,give me some idea sothat i can start again
i am kind of stuck here
thanks for your help :)
my code is here in this link how to make custom seek bar for player in jwplayer
and i am including here as well
$(document).ready(function() {
var videoLength;
function setPosition(myPosition ) {
jwplayer().seek(myPosition);
}
// finding durartion of the video
jwplayer().onTime(function(event){
jwplayer().play();
jwplayer().pause();
videoLength=event.duration;
seek(videoLength);
});
function seek(pos)
{
var position = Math.round(pos);
$("#volume").slider({
min: 0,
max:position,
value: 0,
range: "min",
animate: true,
slide: function(event, ui) {
var range = $( ".selector" ).slider( "option", "range" );
setPosition(ui.value);
}
});
}
});
jwplayer code
<script type="text/javascript">
var trackpathEn = "myCaptionsEn.vtt";
var trackpathEn = "myCaptionsEn.vtt";
var trackpathJa = "myCaptionsJa.vtt";
jwplayer('player').setup({
flashplayer: './jwplayer.flash.swf',
file: 'example1.mp4',
skin: "./skins/six/six.xml",
controls: false,
tracks: [
{ file: trackpathEn, back: false,color: 'cc0000', fontsize: 20 , label: "English", kind: "subtitles",default:true },
{ file: trackpathJa, back: false,color: 'cc0000', fontsize: 20 , label: "Japanese", kind: "subtitles" },
]
});

hey i found the way
thanks guys all for your help
$("#seekBar").slider('option', 'value',slider_range);
just make sure that your passing right value in "slider_range"..after calculation
and it must be integer:)