slider interview questions
Top slider frequently asked interview questions
I have been looking for a Jquery UI slider pluging that supports mutiple ranged handles. The existing Jquery UI slider only supports one range set of values. I am looking for a slider that you can have muliple ranges. So a range with an inner range or two ranges that don't overlap.
Example:
R = handle
XX = Slider bar
= or - = Range between handles
XXR1------R1XXXR2--R2XXXXXXXXX
XXXR1----R2====R2-----R1XXXXXX
XXXR1--R2===R2----R3===R3--R1XXXX
I don't think there is a slider out there that can do this?? Just wanted to make sure before I go and write one.
Source: (StackOverflow)
How to get the values of the slider bootstrap to hidden iputs?
<input type="hidden" name="min_value" id="min_value" value="">
<input type="hidden" name="max_value" id="max_value" value="">
$(function() {
$( "#slider-range-s1" ).slider({
range: true,
min: 0,
max: 500,
value: [ 0, 500 ]
});
});
Source: (StackOverflow)
I want to modify the stock JQuery UI slider so that the handle has a arrow on it rather than being a square. i.e. I want to use a custom image as the handle.
There are a few tutorials that do it:
But I can't get it to work. The following code results in a stationary handle image:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel='nofollow' href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<style type="text/css">
#myhandle {position: absolute;z-index: 100;height: 25px;width: 35px;top: auto;background: url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").slider({handle: '#myhandle'});
});
</script>
</head>
<body>
<div id="slider"><div id="myhandle"></div></div>
</body>
</html>
It is as if JQuery doesn't pick up that I want to use the myhandle id for the handle. I'm wondering: Do I need a plugin for JQuery to recognise the handle option? (it is not documented in http://docs.jquery.com/UI/Slider). Or perhaps it only worked in an old version of JQuery?
Any ideas?
Source: (StackOverflow)
I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.
I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.
I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500:
https://www.easterisland.travel/
I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.
Any clues? Thank you!
Source: (StackOverflow)
in jQuery-UI Slider arrow keys move the slider handle (after the handle has been selected/clicked on), which is nice, but I don't want slider to handle keyboard (I use arrow keys on the page for another purpouse).
Any ideas how to disable keyboard events for jquery-ui slider?
Source: (StackOverflow)
Can you please let me know how I can get the total and current number of the carousel slides in bootstrap like the image below?
I have an standard Bootstrap carousel and a <div> with the .num class to display the total and current number and I used this code to retrieve the numbers but it didn't go through
$('.num').html(){
$('#myCarousel').carousel({number})
}
Thanks
Update:
Please find a sample at this jsfiddle LINK
Source: (StackOverflow)
I tried this XAML:
<Slider Width="250" Height="25" Minimum="0" Maximum="1" MouseLeftButtonDown="slider_MouseLeftButtonDown" MouseLeftButtonUp="slider_MouseLeftButtonUp" />
And this C#:
private void slider_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
sliderMouseDown = true;
}
private void slider_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
sliderMouseDown = false;
}
The sliderMouseDown variable never changes because the MouseLeftButtonDown and MouseLeftButtonUp events are never raised. How can I get this code to work when a user has the left mouse button down on a slider to have a bool value set to true, and when the mouse is up, the bool is set to false?
Source: (StackOverflow)
I would like to make a slider stop at discrete points that represent integers on a timeline. What's the best way to do this? I don't want any values in between. It would be great if the slider could "snap" to position at each discrete point as well.
Source: (StackOverflow)
Can someone guide me if C# WinForms has a slider control? I see WPF has it but it doesn't show up for me in WinForms what could be the problem?
Source: (StackOverflow)
I have seen this asked before on Stackoverflow but cant find an precise answer. I just want the captions to overlay on my image. Instead they seem to just fall below. I am assuming this is probably a positioning issue, but can not find any other resource that will pinpoint the problem. I figured I would ask here. Thanks for your time in advance.
Below is the CSS, HTML and JavaScript and jQuery. I have followed the instructions as stated by Flexslider for installation.
CSS
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev {opacity: 1; left: 0;}
.flex-direction-nav .flex-next {opacity: 1; right: 0;}
}
JQuery and Javascript
<link rel="stylesheet" rel='nofollow' href="css/flexslider.css" type="text/css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container"
});
});
HTML
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/Kemper_Mark.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<img src="img/octoberfest.jpg" />
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="img/plat_club.jpg".jpg" />
</li>
</ul>
</div>
</div>
Source: (StackOverflow)
I'd like to create a slide button (= something as switch ) with two states: on and off so user will have to press the button and slide it to change the state (something similar as unlock slider but not cross whole screen). Do you have any idea how to do it? I really tried to find the answer but I haven't been successful.
Thanks a lot!
Source: (StackOverflow)
In the iPhone or Android, if you have a JQuery Slider, it doesn't quite work (touchscreen will move the screen instead of drag the slider.)
Source: (StackOverflow)
I'm testing the slider events in jQueryMobile and I must been missing something.
page code is:
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
and if I do:
$("#slider").data("events");
I get
blur, focus, keyup, remove
What I want to do is to get the value once user release the slider handle
and having a hook to the keyup event as
$("#slider").bind("keyup", function() { alert('here'); } );
does absolutely nothing :(
I must say that I wrongly assumed that jQueryMobile used jQueryUI controls as it was my first thought, but now working deep in the events I can see this is not the case, only in terms of CSS Design.
What can I do?
jQuery Mobile Slider source code can be found on Git if it helps anyone as well a test page can be found at JSBin
As I understand, the #slider is the textbox with the value, so I would need to hook into the slider handle as the generated code for this slider is:
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label>
<input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" />
<div role="application" class="ui-slider ui-btn-down-c ui-btn-corner-all">
<a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" rel='nofollow' href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"></span>
</span>
</a>
</div>
</div>
and checking the events in the handler anchor I get only the click event
$("#slider").next().find("a").data("events");
Fix
From Ivan answer, we just need:
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
and then
$(document).bind("pagecreate", function(event, ui) {
$('#slider').siblings('.ui-slider').bind('tap', function(event, ui){ makeAjaxChange($(this).siblings('input')); });
$('#slider').siblings('.ui-slider a').bind('taphold', function(event, ui){ makeAjaxChange($(this).parent().siblings('input'));
});
function makeAjaxChange( elem ) {
alert(elem.val());
}
Thank you Ivan for the heads up.
Source: (StackOverflow)
I have a ui.slider and change it's min and max values on runtime. But these changes only get reflected in the view, when I set the values afterwards too (which causes it to fire events that are not needed). In my opinion, it should refresh the view after setting min and max too. Is there a simple workaround, seems like a refresh method is missing for the slider.
$("#something").slider({
range: true,
values: [25, 75],
min: 0,
max: 100
});
$("#something").slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
$("#something").slider("option", "values", [25, 75]); // the left handle is now at the left end, but doing this triggers events
Edit This issue has been fixed in jQuery UI 1.9
Source: (StackOverflow)