Develop Reference

jQuery UI Sliders - multiples slider(not range) at same position

I am trying to create a slider with 2 handlers with no dependancies to each other so it is not a range slider.
I`ve altered the css of both so that one apear above the line and one under it. When I inspect the slider at run time I can see that they overlap a bit but 3/4 of each slider does not
my problem is if I set both handler to the same value, when I try to change a value, jquery give me the control of the last one I`ve moved even if I click on the other one in a part where it dosen't overlap. seem like the slider engine give me control of this slider because in a range slider situation this will make sense(as they usualy completely overlap).
I use simple slider loading :
$( "#slider1" ).slider(
{
min: 1,
max: 11,
step: 1,
values: [5,5],
slide: function(event, ui) {
if(ui.value > 10){
return false;
}
}
}
);
anyone got any idea how I could bypass this?
here is the fiddle of it : fiddle

how to slow down Flowslider slider?

I have a flowslider slider, here the page of the project http://www.flowslider.com/
It's a very easy to use slider however I don't know how to reduce the sliding speed, there's no working example in the site
that's my slider initialization code:
<script>
jQuery(document).ready(function($) {
// Select your slider element and call Flow Slider plugin.
var $slider = $("#slider");
$slider.FlowSlider({
controllerOptions: [{
mouseStart:100,
mouseEnd:100,
}],
marginStart:20,
marginEnd:20,
mode:"horizontal"
});
});
</script>
the actual slider is just a
<div id="slider">
a bunch of PHP generated divs here, each one is a slider element
</div>
I tried setting speed and coefficient but without any results

You can't change the sliding speed, it's because the sliding speed depends on user mouse action ( user mouse movement) and the width of content div and the count of images in it. It means when you move your mouse slowly cross the slides the sliding happens slow and when you do it fast slides goe fast. This slide is not that kind of slides that repeats sliding in a period of time.

As written in the documentation of HoverCenter you can use the coefficient or write your own moveFunction. It seems that a list for controllerOptions is missing in the documentation.
To get coefficient to work, use something like:
$('#flowslider').FlowSlider({
mode: 'horizontal',
marginStart: 0,
marginEnd: 0,
controllers: ['HoverCenter'],
controllerOptions: [{
coefficient: 0.1
}]
});

Always show the tip text of Slider in Extjs

In Extjs 4.1.1a, How to keep the tip text of the slider always visible?
Currently, the tip text is being visible whenever the user drags the bar of the slider.
I searched on docs but couldn't find any related concepts.
If it is not documented or not possible, then please explain me how to create the tip text manually. The tip text should move along the bar of the slider and it should not overcome or hide any other adjacent components.
Here is my code which generates a simple slider:
xtype:'slider',
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 6,
minValue: 1,
maxValue: 12,
useTips: true,
tipText: function(thumb){
var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var value = Ext.String.format(months[thumb.value]);
return value;
},
Question 2: Is it atleast possible to show the tip text when hovered on the slider?
PS: I also asked the same question here.
EDIT 1: I am also moving the seek bar of the slider with two adjacent buttons (< and >). So, care must be taken that if I move the seek bar with the adjacent buttons then the tip text should also move.
EDIT 2: The tip text should be visible when hovered on the slider or the adjacent buttons.
Answer: http://jsfiddle.net/WdjZn/1/

I've managed to keep tip visible by overriding some event handlers in Ext.slider.Tip:
Ext.define('AlwaysVisibleTip', {
extend: 'Ext.slider.Tip',
init: function(slider) {
var me = this;
me.callParent(arguments);
slider.removeListener('dragend', me.hide);
slider.on({
scope: me,
change: me.onSlide,
afterrender: function() {
setTimeout(function() {
me.onSlide(slider, null, slider.thumbs[0]);
}, 100);
}
});
}
});
Ext.create('Ext.slider.Single', {
animate: false,
plugins: [Ext.create('AlwaysVisibleTip')],
// ...
});
Check out the demo.
Drawbacks of my approach:
It relies on private method onSlide
It applicable only to single slider
Keyboard navigation works properly only if animate is set to false
setTimeout is used in order to adjust initial position of the tip
Fixing this drawbacks would require hacking not only the Ext.slider.Tip class but Ext.slider.Multy class and probably Ext.slider.Thumb class.
Edit
Replaced changecomplete event with change event as changecomplete is not fired when slider.setValue() is called.
Added demo of slider with adjacent buttons.
Edit2
tipText config is no longer applied if custom tip plugin is used. You have to use getText config of the plugin:
Ext.create('Ext.slider.Single', {
animate: false,
plugins: [Ext.create('AlwaysVisibleTip',{
getText: function(thumb) {
var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return Ext.String.format(months[thumb.value]);
}
})],
// ...
});
Updated the demo.

for extjs 4.2,
change :
slider.removeListener('dragend', me.hide);
to :
slider.removeListener('dragend', me.hide, me);

Bidirectional touch swipe slider for both horizontal and vertical

There are many JavaScript or CSS touch swipe sliders out there but all of them seem to only allow either vertical or horizontal swipe of a slide. Is there anything out there that allows both on one slide, so I can swipe horizontally and vertically on one slide?

I'm not 100% sure if this is what you are looking for, but it looks darn close:
iDangero.us Swiper.
http://www.idangero.us/sliders/swiper/
Allows vertical swping boxes within another horizontal carousel/slider. I've been looking for the same thing for awhile, and this is the closest plugin I've found to what I'm looking for. A little hacking/manipulation could probably make it do what you're looking for.

Here is an Easy Way of clreating horizontal and vertical slider
<script>
function MM_effectSlide1(targetElement, duration, to, from, slide, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: true, toggle: true});
}
function MM_effectSlide2(targetElement, duration, to, from, slide, toggle)
{
Spry.Effect.DoSlide(targetElement, {duration: duration, to: to, from: from, horizontal: false, toggle: true});
}
</script>
<body>
<div id="socialmedia" class="socialcontainer" onclick="MM_effectSlide1('socialmedia', 1000, '100%', '11%', true, true)"></div>
If you look at the Code the only code that should be changed is the MM_effectSlide1, 2, 3, and so forth

You can use fullPage.js to have swipes exactly as you describe, as shown on this demo page.
The only issue I have with fullPage.js is the lack of 1:1 touch movement. So instead of the swipe being controlled as long as you have your finger on the screen, the script has a configurable variable that says once a threshold swipe of X percent of the screen height/width has been met. This works, but doesn't feel nearly as nice as something like RoyalSlider which does have 1:1 touch movement; so if you swipe only 49% of the way you remain on the same section. That said fullPage.js has great support (IE8+) and is updated regularly.
Ideally I'd like fullPage.js to have 1:1 touch movement, the author is open to pull requests but for now my knowledge of javascript is too basic to implement something like this.
An option I am considering at the moment is using two sliders in combination with each other. I am going to use RoyalSlider for the left and right swipes (so you get the nice 1:1 touch) and fullPage.js for the vertical up down effect.

Slider control for volume - JQuery/Javascript

I am looking for a fancy Slider control using JQuery/Javascript. The native JQuery slider is rather bland for this requirement. The slider will be used to specify the volume in the increments of 5. So, this slider should only let user slide in increments of 5.
One nice to have feature is to be able to show label above the slider position indicating what volume the user has selected.

Here's an example of the customization you're after that uses the jQuery UI Slider. It's all CSS in the background, you can customize the hell out of it.
Setting the snap you can do increments and update the amount like this:
$("#mySlider").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
step: 5,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#mySlider").slider("value"));

I've found a nice volume slider. I think this is what you're looking for. It's the classic triangle-shaped controller with increasing vertical bars. And it's very customizable with position indicator. Download the zip file here: http://ruwix.com/javascript-volume-slider-control/