Google Analytics Event Tracking on JqueryUI Range Slider - javascript

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);
}

Related

How to make slider use decimal values

I would like to display a slider with values from 0kg to 1kg, with pips every 100g, and the label should display 'g' and 'kg' respectively:
0 100g 200g 300g 400g 500g 600g 700g 800g 900g 1kg
How do I format the label depending on the value?
I want the slider to take 30g value for example, and have the thumb appear in the correct position. In the same time, if user drags the thumb, it should snap at 100g.
noUiSlider has a step property. Initialize like this:
noUiSlider.create(container, {
range: {
'min': 0,
'max': 1000,
},
step: 100,
//.... your other items
}

Javascript Passing Parameters When Clicked on Link On Another Page

I have a slider I have implemented on my site and wanted to land on a specific value when clicking on a link on another page:
Here is the script and the parameter I would like to change:
$("#screeningSlider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
from: 20,
min: 1,
max: 2000,
step: 0,
grid_num: 4,
prettify_separator: ",",
postfix: " Units",
max_postfix: "+",
force_edges: true,
});
So when on another page, I'd like to click on a button that would allow me to land on this page, But the parameter FROM to be 10 instead of the default value above. This should only occur when selecting from that specific button.
Here is my site that has the slider: http://therrd.com/screening.html#tenant-Screening
Sharing JavaScript values between pages isn't really possible without storing it in some other form, and then parsing it back into JavaScript.
You could use URL parameters and then parse the incoming URL and import the default from value from there.
<a href='http://www.yoursite/?from=10'>Referral </a>
The downside to this is, obvious, anyone could just peek at your URL and then try and game your system (think what may happen if they set it to ?from=0 and you didn't protect against that). You'd also need to protect against injection attacks.
You could use localStorage to set a key after they've clicked that specific button, and then check localStorage for that key when loading the main page to get the expected default from value.
Set the value on click for the special link:
$('#link').on('click', function(){
localStorage.setItem('fromValue', 10);
});
And retrieve it on load for the resulting page:
var fromValue = localStorage.getItem('fromValue')
if (fromValue) { /* adjust the slider's default from value*/ }
If you don't want to use server side for that, you can do it this way
[EDITED]
1 - set the link
Go
2 - set your function in yourpage.html
vals = {max: 100, min: 0, def: 20} //use your own values here for max min and def
var param = window.location.href.split("slide=");
slide = isNaN(param[param.length - 1]) ||
param[param.length - 1] > vals.max ||
param[param.length - 1] < vals.min ? vals.def : param[param.length - 1];
//check if there is a url param, if it's a number and if it's in range
$("#screeningSlider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
from: slide,
min: 1,
max: 2000,
step: 0,
grid_num: 4,
prettify_separator: ",",
postfix: " Units",
max_postfix: "+",
force_edges: true,
});

Stop the jQueryUI Slider after a specific difference/margin

I have a Margin or we can say a Specific distance changed from HTML select option tag in future dynamically..
I have created a Range Slider with jQueryUI Slider.
What i am trying to do :
I want to stop sliding after a specific distance means margin.
Need help .
JSFIDDLE: http://jsfiddle.net/3j3Um/1/
HTML
<div id="slider-range"></div>
jQuery
$("#slider-range").slider({
range: true,
min: 0,
max: 95,
values: [20, 80],
slide: function (event, ui) {
var getMargin = ui.values[0] - ui.values[1];
$("#margin").val(getMargin);
if (getMargin == -30) {
alert('stop the sliding');
}
}
});
I think you are doing it alright , you just need to add return statement on the condition met. And also you need to change the comparison operator to (<) Since slide function is invoked every-time a slide action is performed.
I have modified a bit of code to make it work(not clean but you can change it later) :
var getMargin = ui.values[0] - ui.values[1];
var rangeValue = (-1) * parseInt(getMargin);
if(rangeValue < 30){
return false;
}
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$("#margin").val(getMargin);
And you can check this Working Fiddle

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!

Getting the position of an dragged item in JQuery

On dragging an item to a new location I would like to output the new position of the item. for example
Col = 1
Position = 3
meaning the widget has been moved to the first col 3rds down.
I am using this script http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
I think the best place to put this is at the point below. However I tried
ui.item.index to get the new position and this just gives me the value - 1 not the position of the dragged object as excepted. Any ideas?
$(settings.columns).sortable({
items: $sortableItems,
connectWith: $(settings.columns),
handle: settings.handleSelector,
placeholder: 'widget-placeholder',
forcePlaceholderSize: true,
revert: 300,
delay: 100,
opacity: 0.8,
containment: 'document',
start: function (e,ui) {
$(ui.helper).addClass('dragging');
},
stop: function (e,ui) {
alert("New position: " + ui.item.index());
$(ui.item).css({width:''}).removeClass('dragging');
$(settings.columns).sortable('enable');
}
});
Looking at the demo on the nettuts site: Demo
ui.item is already a jQuery object so you can reference it as such.
0-based index position of the column:
ui.item.parent().parent().children().index(ui.item.parent())
0-based index position of the item:
ui.item.parent().children().index(ui.item);
so if you were to drag an item underneath the "Welcome to iNettuts" in the first column the above code would return 0 for column (so the first column) and 1 for the item position (so the second item in the column)
Just to inform you: the script is currently not working on Internet Explorer 9 - the drag functionality fails to work.
I found the following 'workaround':
add
<meta http-equiv="X-UA-Compatible" content="IE=8">
to your page.

Categories