68259

Range slider getting value

Question:

<div id="slider"></div> function collision($div1, $div2) { var x1 = $div1.offset().left; var w1 = 40; var r1 = x1 + w1; var x2 = $div2.offset().left; var w2 = 40; var r2 = x2 + w2; if (r1 < x2 || x1 > r2) return false; return true; } // // slider call $('#slider').slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function(event, ui) { $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]); $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]); $('.price-range-both').html('<i>$' + ui.values[ 0 ] + ' - </i>$' + ui.values[ 1 ] ); // if ( ui.values[0] == ui.values[1] ) { $('.price-range-both i').css('display', 'none'); } else { $('.price-range-both i').css('display', 'inline'); } // if (collision($('.price-range-min'), $('.price-range-max')) == true) { $('.price-range-min, .price-range-max').css('opacity', '0'); $('.price-range-both').css('display', 'block'); } else { $('.price-range-min, .price-range-max').css('opacity', '1'); $('.price-range-both').css('display', 'none'); } } }); $('.ui-slider-range').append('<span class="price-range-both value"><i>$' + $('#slider').slider('values', 0 ) + ' - </i>' + $('#slider').slider('values', 1 ) + '</span>'); $('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#slider').slider('values', 0 ) + '</span>'); $('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#slider').slider('values', 1 ) + '</span>');

Am using the above slider.The value is setting in jquery using below code. I ned to alert the value when it is chenging. Can anyone help me to solvr=e this. $('.ui-slider-handle:eq(0)').append('' + $('#slider').slider('values', 0 ) + '');

Answer1:

I think that you have not included the Required Files Please Link the files

Css File <a href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.cs" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.cs</a>

Script File

<a href="https://code.jquery.com/ui/1.11.4/jquery-ui.js" rel="nofollow">https://code.jquery.com/ui/1.11.4/jquery-ui.js</a>

<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js</a>

<pre class="snippet-code-js lang-js prettyprint-override">function collision($div1, $div2) { var x1 = $div1.offset().left; var w1 = 40; var r1 = x1 + w1; var x2 = $div2.offset().left; var w2 = 40; var r2 = x2 + w2; if (r1 < x2 || x1 > r2) return false; return true; } // // slider call $('#slider').slider({ range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function(event, ui) { $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]); $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]); $('.price-range-both').html('<i>$' + ui.values[ 0 ] + ' - </i>$' + ui.values[ 1 ] ); // if ( ui.values[0] == ui.values[1] ) { $('.price-range-both i').css('display', 'none'); } else { $('.price-range-both i').css('display', 'inline'); } // if (collision($('.price-range-min'), $('.price-range-max')) == true) { $('.price-range-min, .price-range-max').css('opacity', '0'); $('.price-range-both').css('display', 'block'); } else { $('.price-range-min, .price-range-max').css('opacity', '1'); $('.price-range-both').css('display', 'none'); } } }); $('.ui-slider-range').append('<span class="price-range-both value"><i>$' + $('#slider').slider('values', 0 ) + ' - </i>' + $('#slider').slider('values', 1 ) + '</span>'); $('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#slider').slider('values', 0 ) + '</span>'); $('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#slider').slider('values', 1 ) + '</span>'); <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/> <div id="slider"></div>

Recommend

  • ReplaceWith carousel-inner with new items
  • How to push ViewController with slide effect from left to right? Animation name required
  • Transition height onload of d3js rect svg
  • Bootstrap Carousel Next/Prev not working
  • RxJava debounce by arbitrary value
  • Eliminate partial duplicate rows from result set
  • D3 get axis values on zoom event
  • Excel's Macro-Recorder usage
  • C: Incompatible pointer type initializing
  • d3 v4 drag and drop with TypeScript
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Opengl-es onTouchEvents problem or a draw problem? [closed]
  • How to handle AllServersUnavailable Exception
  • Convert array of 8 bytes to signed long in C++
  • ActionScript 2 vs ActionScript 3 performance
  • VBA Convert delimiter text file to Excel
  • To display the title for the current loaction in map in iphone
  • How to get next/previous record number?
  • Traverse Array and Display in markup
  • Load html files in TinyMce
  • How to set the response of a form post action to a iframe source?
  • Understanding cpu registers
  • Change div Background jquery
  • How to stop GridView from loading again when I press back button?
  • How does Linux kernel interrupt the application?
  • Linking SubReports Without LinkChild/LinkMaster
  • apache spark aggregate function using min value
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Recursive/Hierarchical Query Using Postgres
  • Running Map reduces the dimensions of the matrices
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?
  • Why do underscore prefixed variables exist?