slider – Page 2 – Tarik Billa

How to change Jquery UI Slider handle

June 7, 2023 by Tarik

The CSS class that can be changed to add a image to the JQuery slider handle is called “.ui-slider-horizontal .ui-slider-handle“. The following code shows a demo: <!DOCTYPE html> <html> <head> <link type=”text/css” 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”> .ui-slider-horizontal .ui-state-default {background: white url(http://stackoverflow.com/content/img/so/vote-arrow-down.png) no-repeat scroll 50% 50%;} … Read more

Is there a simple JavaScript slider? [closed]

June 4, 2023 by Tarik

hey i’ve just created my own JS slider because I had enough of the heavy Jquery UI one. Interested to hear people’s thoughts. Been on it for 5 hours, so really really early stages. jsfiddle_slider

When using setInterval, if I switch tabs in Chrome and go back, the slider goes crazy catching up

May 28, 2023 by Tarik

How to detect when a tab is focused or not in Chrome with Javascript? window.addEventListener(‘focus’, function() { document.title=”focused”; },false); window.addEventListener(‘blur’, function() { document.title=”not focused”; },false); To apply to your situation: var autopager; function startAutopager() { autopager = window.setInterval(nextImage, 8000); } function stopAutopager() { window.clearInterval(autopager); } window.addEventListener(‘focus’, startAutopager); window.addEventListener(‘blur’, stopAutopager); Note that in the latest version … Read more

iOS how to make slider stop at discrete points

May 19, 2023 by Tarik

The steps that I took here were pretty much the same as stated in jrturton’s answer but I found that the slider would sort of lag behind my movements quite noticeably. Here is how I did this: Put the slider into the view in Interface Builder. Set the min/max values of the slider. (I used … Read more

Error in slick.js: “Uncaught TypeError: Cannot read property ‘add’ of null”

April 14, 2023 by Tarik

That’s due to calling init twice. This works without error: $(“.slider”).not(‘.slick-initialized’).slick() Also, “silder” looks like a typo. Relying on a timeout is also error-prone. Unfortunately, Internet Explorer uses a different event to tell you when the HTML elements and JS libraries have been loaded. There are many libraries to avoid the 100 or so lines … Read more

Does C# WinForms have a slider control?

April 13, 2023 by Tarik

There’s a TrackBar class that looks a little different, but might be what you’re looking for.

WPF: Slider with an event that triggers after a user drags

March 19, 2023 by Tarik

Besides using the Thumb.DragCompleted event you can also use both ValueChanged and Thumb.DragStarted, this way you don’t lose functionality when the user modifies the value by pressing the arrow keys or by clicking on the slider bar. Xaml: <Slider ValueChanged=”Slider_ValueChanged” Thumb.DragStarted=”Slider_DragStarted” Thumb.DragCompleted=”Slider_DragCompleted”/> Code behind: private bool dragStarted = false; private void Slider_DragCompleted(object sender, DragCompletedEventArgs e) … Read more

JQuery Slider, how to make “step” size change

March 10, 2023 by Tarik

Not sure if you want the slider scale to be in proportion to your values* but if so, I provided a solution to this for someone else who asked the same question. You can find my solution here. Basically I make use of the slide event that gets triggered when you move the slider to … Read more

Touch move getting stuck Ignored attempt to cancel a touchmove

March 1, 2023 by Tarik

The event must be cancelable. Adding an if statement solves this issue. if (e.cancelable) { e.preventDefault(); } In your code you should put it here: if (this.isSwipe(swipeThreshold) && e.cancelable) { e.preventDefault(); e.stopPropagation(); swiping = true; }

Change the Arrow buttons in Slick slider

January 24, 2023 by Tarik

Slick has a very easy way to customize its buttons through two variables in its own configuration: prevArrow and nextArrow. Both types are: string (html | jQuery selector) | object (DOM node | jQuery object), so in your settings slick slider you can set the classes: prevArrow: $(‘.prev’) nextArrow: $(‘.next’) and add to these elements … Read more