How to prevent jQuery UI slider handles overlapping? - jquery-ui

Using jQuery-UI 1.7, I have integrated slider. Everything is working fine, But slider's handles are overlapping each other while dragging. How can i prevent this.
You can see my ui slider here
Default view:
Overlapped view:


You can accomplish this by detecting an overlap in a slide event handler and returning false to prevent the slide from occurring. Example:
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
if ( ( ui.values[ 0 ] + 20 ) >= ui.values[ 1 ] ) {
return false;
}
}
});
body { padding: 50px; }
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="slider-range"></div>
Note that in this example the value of 20 is simply hardcoded based on the width of the handle. Per your use case you'll have to change that to whatever makes sense.


<script>
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function(event, ui) {
if ( (ui.values[0] + 55) >= ui.values[1] ) {
return false;
}
}
});​
</script>

Related

Slider on barchart

With Highcharts I realized a barchart. This one show the number of documents per year.
To select one or more dates, use the slider located below the graph.
I managed to put it in place.
However, I can not link it to the chart.
Here, if you put the first cursor on 2000 and the second on 2003, he would have the graph should shows only the dates 2000, 2001, 2002, and 2003.
Can you help me to do this please ?
Here is my HTML/PHP code :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="container"></div>
<div style="margin: 20px 0px 0px 60px">
<!--
The "oninput" attribute is automatically showing the value of the slider on load and whenever the user changes the value.
Since we are using a category x-axis, the values are between 0 and 12. For this example, I'm adding your base year (2004)
to the output value so it shows a label that's meaningful to the user. To expand this example to more years, set your max value
to the appropriate value and the base year to wherever you plan to start your chart's data.
-->
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 1960,
max: 2016,
values: [ 1960, 2016 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>
<p>
<label for="amount">Year(s):</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
And here is my JS code :
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'x'
},
colors:[
'#d8d826'
],
legend:{
enabled:false
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
// NOTE: There is an interesting bug here where not all labels will be shown when the chart is redrawn.
// I'm not certain why this is occuring, and I've tried different methods to no avail. I'll check with Highcharts.
categories: ['1960','1961','1962','1963','1964','1965','1966','1967','1968','1969','1970','1971','1972','1973','1974','1975','1976','1977','1978','1979','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992','1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016'],
tickmarkPlacement: 'on', tickInterval: 1,
minRange: 1 // set this to allow up to one year to be viewed
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4,49.9,83.6,48.9,69.1,50]
}]
});
});
You could see the result on : https://jsfiddle.net/uvat8u05/20/

The simple solution for your problem is to add jQuery responsible for your slider inside load event callback function of your chart, and use setExtremes for setting new extremes on slide:
http://api.highcharts.com/highcharts#Axis.setExtremes
function(chart) {
$("#slider-range").slider({
range: true,
min: 1960,
max: 2016,
values: [1960, 2016],
slide: function(event, ui) {
$("#amount").val(ui.values[0] + " - " + ui.values[1]);
chart.xAxis[0].setExtremes(ui.values[0] - 1960, ui.values[1] - 1960)
}
});
$("#amount").val($("#slider-range").slider("values", 0) +
" - " + $("#slider-range").slider("values", 1));
}
Here you can find live example how it can work: https://jsfiddle.net/uvat8u05/22/
Regards,

Issue on Setting UI Slider For Opacity Amount

Can you please take a look at this jsfiddle and let me know how I can use the slider to get values from 0 to 1 like 0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1
Here is what I have
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 1,
step: 10,
slide: function( event, ui ) {
$( "#opacity" ).val( ui.value );
}
});
$( "#opacity" ).val( $( "#slider" ).slider( "value" ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<p>
<label for="amount">Opacity:</label>
<input type="text" id="opacity" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>

Your step value is too high, try:
$( "#slider" ).slider({
value:1,
min: 0,
max: 1,
step: 0.1,
slide: function( event, ui ) {
$( "#opacity" ).val( ui.value );
}
});
jsfiddle demo
New fiddle demo

jquery ui slider live update

I've written a script for a simple jquery ui slider. There are two sliders (later I'll add more) and when you change their value, it displays below them, and then updates a total. What I'm having a hard time figuring out, is how to make it so as you're sliding the values are getting updated, instead of getting updated after you've finished.
Thanks for any help!
Fiddle of Demo
http://jsfiddle.net/tMmDy/
HTML
<div class="slider_1 slider"></div>
<p id="slider_1-value"></p>
<div class="slider_2 slider"></div>
<p id="slider_2-value"></p>
CSS
.slider {
width:100px;
height:5px;
background:blue;
}
JS
$(".slider").slider({
animate: "fast",
max: 25,
min: 0,
step: 1,
value: 10,
option: {}
});
$(".slider_1").on("slidechange", function (event, ui) {
total_1 = $(".slider_1").slider("value");
$("#slider_1-value").html(total_1);
total_value_update();
});
$(".slider_2").on("slidechange", function (event, ui) {
total_2 = $(".slider_2").slider("value");
$("#slider_2-value").html(total_2);
total_value_update();
});
function total_value_update() {
total_values = total_1 + total_2;
$("#total_value").html(total_values);
}

Use the slider's .slide() event and try it like this:
jsFiddle example
var total_1, total_2;
$(".slider").slider({
animate: "fast",
max: 25,
min: 0,
value: 10,
slide: function (event, ui) {
total_1 = $(".slider_1").slider("value");
total_2 = $(".slider_2").slider("value");
$("#slider_1-value").html(total_1);
$("#slider_2-value").html(total_2);
total_value_update();
},
change: function (event, ui) {
total_1 = $(".slider_1").slider("value");
total_2 = $(".slider_2").slider("value");
$("#slider_1-value").html(total_1);
$("#slider_2-value").html(total_2);
total_value_update();
}
});
function total_value_update() {
total_values = total_1 + total_2;
$("#total_value").html(total_values);
}

Sending Jquery UI slider values to database

I have a ui slider element that I am using to let people rate a product, the purpose is to have this slider along with a button to insert the value into a MySQL table (sort of voting)
my slider looks like
$("#slider-range-max4").slider({
range: "max",
min: 1,
max: 10,
value: 0,
slide: function (event, ui) {
$("#slider-range-max-amount4").text(ui.value);
}
});
$("#slider-range-max-amount1").text($("#slider-range-max1").slider("value"));
How can I use a button to send the value selected by the user to mysql, do I have to embed the code into a form ?
Thanks

use ajax like bellow and send the value to php
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$.ajax({
type:"POST",
url:"your.php",
data:"vote="+$( "#slider-range-max" ).slider( "value" ),
success:function(response){
alert(voted);
}
})
});
In PHP
<?php
$vote="";
if(isset($_POST['vote'])){$vote=$_POST['vote']}
//now do your job with MySql here
?>

Jquery ui slider with string values?

I am working with jQuery UI slider.
Here is the code i am using:
$(function() {
$( "#slider" ).slider({
value:1,
min: 0,
max: 5,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
There will be 5 steps and I'd like to show the strings in each step instead of the numbers:
1=very sad
2=sad
3=not so sad
4=happy
5=very happy
How can I do this ?

You can put your step labels in an array, then use the slider's value as an index into that array:
var steps = [
"very sad",
"sad",
"not so sad",
"happy",
"very happy"
];
$(function() {
$("#slider").slider({
value: 1,
min: 0,
max: 4,
step: 1,
slide: function(event, ui) {
$("#amount").val(steps[ui.value]);
}
});
$("#amount").val(steps[$("#slider").slider("value")]);
});

Resources