Develop Reference

Draggable Elements That Push Others Out Of Way on MOBILE

I have been able to create Draggable Elements That Push Others Out Of Way using the following resource:
Draggable Elements That Push Others Out Of Way
$(".slides").sortable({
placeholder: 'slide-placeholder',
axis: "y",
revert: 150,
start: function(e, ui){
placeholderHeight = ui.item.outerHeight();
ui.placeholder.height(placeholderHeight + 15);
$('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
},
change: function(event, ui) {
ui.placeholder.stop().height(0).animate({
height: ui.item.outerHeight() + 15
}, 300);
placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));
$(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
height: 0
}, 300, function() {
$(this).remove();
placeholderHeight = ui.item.outerHeight();
$('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
});
},
stop: function(e, ui) {
$(".slide-placeholder-animator").remove();
console.clear();
var tabSlides = [];
$('.slides li').each(function() {
tabSlides.push($(this).prop('class').split(' ')[1]);
});
$.each(tabSlides, function(index, value){
console.log(`${value}`);
});
},
});
The script works very well on desktop but I couldn't get t working on mobile. Based on my online search it probably requires a jquery patch or some kind of handle?
What change should be made on the script to make it mobile-friendly?

jQueryUI slider - How to get the value [duplicate]

I am working on http://gamercity.info/ymusic/.
And I am using UI slider as seek bar.
While the video is played I want to invoke a seekTo(seconds) function if user clicked anywhere on the seek bar. How to get new value of seconds after click event?

To read slider value/percentage value at anytime:
var val = $('#slider').slider("option", "value");

$('#slider').slider({
change: function(event, ui) {
alert(ui.value);
}
});​
http://jqueryui.com/demos/slider/

I checked all the answers mentioned above, but found none useful as the following code:
$('#slider').slider("values")[0]; // for slider with single knob or lower value of range
$('#slider').slider("values")[1]; // for highest value of range
Tested with jQuery v2.1.1 and jQuery-ui v1.12.1

var val = $("#slider").slider("value");

$("#slider").slider(
{
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#slider-value" ).html( ui.value );
}
}
);
JS FIDDLE EXAMPLE : http://jsfiddle.net/hiteshbhilai2010/5TTm4/1162/
you can have a function like this
function seekTo(seek_value)
{
$("#slider").slider('option', 'value',seek_value);
}

var value=document.getElementById('slider').value;
var a=value.split("specialName")//name=special charcter between minimum and maximum rang
var b=a[0];//this will get minimum range
var c=a[1];//this will get maximum range

// Price Slider
if ($('.price-slider').length > 0) {
$('.price-slider').slider({
min: 0,
max: 2000,
step: 10,
value: [0, 2000],
handle: "square",
});
}
$(document).ready(function(){
$(".price-slider").on( "slide", function( event, ui ) { console.log("LA RECTM"); var mm = $('.tooltip-inner').text(); console.log(mm); var divide = mm.split(':'); console.log( "min:" +divide[0] + " max:" + divide[1] ) } );
})

You can pass the value to any function or set any element with the value:
$(function () {
$('#slider').slider({
max: 100,
slide: function (event, ui) {
$('#anyDiv').val(ui.value);
}
});
});

Late to the party but this question has still unanswered.
Below example will show you how to get value on change in an input field to save in DB:
$( "#slider-videoTransparency" ).slider({
value: "1",
orientation: "horizontal",
range: "min",
max: 30,
animate: true,
change: function (e, ui) {
var value = $(this).slider( "value" );
$('.video_overlay_transparency').val(value);
}
});
<div id="slider-videoTransparency" class="slider-danger"></div>
<input type="hidden" name="video_overlay_transparency" class="video_overlay_transparency" value="">

JQuery ui slider
var slider = $("#range_slider").slider({
range: true,
min: 0,
max: 500,
values: [0, 500],
slide: function(event, ui) {
var x = ui.values[0];
var y = ui.values[1];
$('#min').text( ui.values[0] )
$('#max').text( ui.values[1] )
$.ajax({
url: '/search',
type: 'GET',
dataType: 'script',
data: {min:x, max:y,term:food_item_name},
success: function(repsonse){},
});
}
});
});

Slider and Date Picker is not showing JQuery

I am creating a page where every time a user presses a button, a row will appear in a table with 4 columns. I am trying to add slider and date picker. it works when i add it in HTML, but doesnt work when I have it in a javascript and jquery function.
Here is function that happens when I press the add button.
$(function() {
$("#date").datepicker()
});
$(function()
{
$("#amount").val(60);
$("#slider1").slider({
slide: function(event, ui)
{
$("#amount").val(ui.value);
},
orientation: "horizontal",
min: 0,
max: 100,
value: 60
});
});
function addLab()
{
var labs = $('#lab tr').length;
if (labs <= 10)
{
var newSlider = $('<div>', { id: 'slider1' });
var newLab = $('<tr><td><input type="text" onchange="sumAll()" id="earnedLab" title="Enter Your Score Out Of 25."/></td><td>' + "25" + '</td><td><input type="text" id="date" /></td><td><div id="slider1" style="width: 200px"/></td></tr>');
$('#lab').append(newLab);
}
else alert("No more boxes allowed for labs");
}

I believe i figured it out... I should have been using classes, not IDs. I switched it and it worked..

Getting updated global variable in JavaScript - jQuery

I am getting undefined type for:
$(".ui-slider-handle").attr("title", '"'+current+'"');
As you can see I tried to alert the current in line 29 and alerts the correct updated current value but it is not functioning on .attr("title", '"'+current+'"'). Why is this happening, and how can I solve this issue?
$(function () {
var current;
$("#slider-vertical").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function (event, ui) {
$("#amount").val(ui.value);
var offsets = $('.ui-slider-handle').offset();
var top = offsets.top;
$(".tooltip").css('top', top - 90 + "px");
$(".tooltip-inner").text(ui.value);
function setCurrent() {
current = ui.value;
}
setCurrent();
}
});
$("#amount").val($("#slider-vertical").slider("value"));
$(".ui-slider-handle").attr("rel", "tooltip");
$(".ui-slider-handle").attr("data-toggle", "tooltip");
$(".ui-slider-handle").attr("data-placement", "left");
// alert(current);
// $(".ui-slider-handle").attr("title", "50");
$(".ui-slider-handle").attr("title", '"'+current+'"');
$("[rel='tooltip']").tooltip();
});

What do you have the single-double-single quote for? Try to use:
$(".ui-slider-handle").attr("title", current);
Does it require double quotes to appear?
I'm gonna leave that cause it was boneheaded and funny. Anyway, current is inside the scope of the function and does not have a value outside of it. Try this instead:
Change this:
function setCurrent() {
current = ui.value;
}
setCurrent();
to
current = ui.value;
Or you could just return the value like this:
function setCurrent() {
return ui.value;
}
current = setCurrent();

Error : cannot call methods on slider prior to initialization attempted to call method 'value'

I have written something like below. onclick of div with id "PLUS" I
am getting the following error:
cannot call methods on slider prior to initialization attempted to call method 'value'
<div id="PLUS" class="PLUS"></div>
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
});
</script>
Any help is appreciated.

If we check error in detail you will notice that it says you are trying to call the value method before the initialization of slider plugin.
Reason:
Actually JavaScript is an interpreted language, and it doesn't wait for first command to execute and finish. That's why your $(".slider").slider({ and $(".PLUS").click(function() { lines run at same time and the error occurs.
Solution:
You can put your code in setTimeout function here is an example given below.
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
setTimeout(function(){
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
},200); // 200 = 0.2 seconds = 200 miliseconds
});
</script>
I hope this will help you/someone.
Regards,

You have used $(".slider").slider() at the time of initializing and
$("#slider-result").slider() at the time of getting the value some plugins work on selector you have used at the time of init, so try that.

The error is caused because $("#slider-result") is not the element initialized as slider and you're trying to execute slider widget methods on it instead of $(".slider") which is the actual slider.
Your code should be
$(".PLUS").click(function() {
var value = $(".slider").slider("value"),
step = $(".slider").slider("option", "step");
$("#slider-result").text(value + step);
//---- maybe you'll need to ----^---- parseInt() the values here
});

i had a similar problem.
your block here
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value")
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
just keep it under
create: function( event, ui ) {}
ie.
create: function( event, ui ) {
$(".PLUS").click(function() {
var value = ui.value;
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
}
hope this works.

The best way I found to achieve this is to use the event from the ON function from the slider library to get the value. Ex:
slider.on('slideStop', function(ev) {
let value= ev.value; //try ev if you want to see all
console.log(value);
})
Regards