Halt the jQueryUI Slider once a specific difference or margin has been reached

Question

Halt the jQueryUI Slider once a specific difference or margin has been reached

I have a specific margin or distance that needs to be changed from an HTML select option tag dynamically in the future. I have implemented a Range Slider using jQueryUI Slider.

My objective: I am looking to halt the sliding action once a specific distance, or margin, is reached. Any assistance would be greatly appreciated.

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

javascript jquery html css jquery-ui

Answer 1

Answer №1

In my opinion, you're on the right track. All you need to do is add a return statement when the condition is met. Also, make sure to change the comparison operator to (<) since the slide function is triggered each time a slide action occurs.

I've made some changes to the code to get it functioning (not the cleanest solution but you can refactor 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);

You can also test this out on Working Fiddle

Answer 2

In my opinion, you're on the right track. All you need to do is add a return statement when the condition is met. Also, make sure to change the comparison operator to (<) since the slide function is triggered each time a slide action occurs.

I've made some changes to the code to get it functioning (not the cleanest solution but you can refactor 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);

Halt the jQueryUI Slider once a specific difference or margin has been reached

Answer №1

You can also test this out on Working Fiddle

Similar questions

I am interested in generating a Stacked Chart in Google Charts using data from a JSON file

Loading HTML content in Electron using the renderer process JS

Unexpected form submission behavior

Tips for avoiding a ligature occurrence in a specific location

Utilizing ng-click within a tooltip

Troubleshooting problem with Vuetify's parallax fluid template

The padding on this button seems to be arbitrary and nonsensical

Enhancing the appearance of child elements using CSS modules in Next.js

React Image Slider not loading pictures

Position the div so that it is aligned with the right edge of the

Next.js allows you to create a single page that corresponds to the root path '/' as well as a dynamic route '/param'

How can I reference a function in a single file component using Vue.js?

JQuery Function for Repeatedly Looping through Div Elements

Breaking down JavaScript arrays into smaller parts can be referred to

Is it possible for a Javascript code to execute multiple tasks upon being inserted into the browser's URL bar?

What are some solutions for adjusting this sidebar for mobile devices?

Using jQuery to reveal the following unordered list after an H3 element by sliding it

Navigating through a table using jQuery to find a specific element

Tips for choosing newly added elements using jQuery selectors

Automatically simulate the pressing of the enter key in a text field upon page load using Javascript