[Slider] How do I get the value selected in the slider

[Slider] How do I get the value selected in the slider

Forge Component
Published on 2015-04-16 by Gonçalo Borrêga
2 votes
Published on 2015-04-16 by Gonçalo Borrêga
Heading says it all, would like to extract the selected value so I can save it to the database but don't know where to start.

From the Jquery api but I don't know what to do with it...

var selection = $( ".selector" ).slider( "value" );

Hi Garvin,

I can only give you an exact response on Monday because I don't have Service Studio here.
Meanwhile you can check the "GeoPerformance" component, it uses the slider on the Map screen and it changes the map while the user slides the bar.

Hi Helio,

Thanks for the pointer, I'll give it a try.  Looks like the DateSlider has an additional input paramter.
Hi again,

I don't know if you already seen it, but this is how you can get it (sample onSlide function):
function( event, ui ) {
   selectedDate = dates[ui.value];
I hope it helps,

Thanks Hélio,

I'll try and get it working in the next couple of days.

Hi Hélio, I have the same question, and I am no good with js, so I don't really understand your answer.
I am using your regular slider for some text, not dates, and I would like to insert that text into an EditRecord column.
How do I get the value I have selected, so I can save it in a record?

Same question here too. I'm using the regular slider, not the DateSlider.
There seems to be no parameter to get the value out of it after adjusting.
It does have a local variable "Element" but it doesn't seem to be set to anything after adjusting.
It does not seem to be possible to make an "OnChange" method or similar.
We're spending a lot of time researching this - can anyone guide us in the right direction?

Some weeks ago I've done some improvements to this component. As I haven't finished the changes I haven't published it yet on the forrge. But I indent to do it.

Nevertheless, given that are some requests that are already implemented in this version, please find the component attached.

As an example, it supports OnStop( ), OnSlide( ), setting and getting a value in Javascript.

The sample page demonstrates these capabilities. 

ClausS, Thomas, Gavin, I hope this helps.


How can i show the selected value inside the selection square?

Something like this below but with the selected value inside the selection square.



Add a div in UISlider javascript
if( options.tooltip == false ){hidett = ' style="display: none;"';} 
jQuery('<a '+
'href="#" tabindex="0" '+
'id="'+handleIds[i]+'" '+
'class="ui-slider-handle" '+ 
'role="slider" '+ 
'aria-labelledby="'+thisLabelId+'" '+ 
'aria-valuemin="'+options.sliderOptions.min+'" '+ 
'aria-valuemax="'+options.sliderOptions.max+'" '+ 
'aria-valuenow="'+options.sliderOptions.values[i]+'" '+ 
'aria-valuetext="'+ttText(options.sliderOptions.values[i])+'" '+ 
'><span class="screenReaderContext">'+labelText+'</span>'+ 
'<span class="ui-slider-tooltip ui-widget-content ui-corner-all"'+ hidett +'><span class="ttContent"></span>'+ 
'<span class="ui-tooltip-pointer-down ui-widget-content"><span class="ui-tooltip-pointer-down-inner"></span></span>'+ 
'</span><div id="'+handleIds[i]+'_value">'+options.sliderOptions.values[i]+'</div></a>') .data('handleNum',i) .appendTo(sliderComponent); });
OnSlide Code
"function( event, ui ) {
      var e = document.getElementById('handle_wtSlider2_wtCOMBO_value')
      e.innerText =  ui.value;

To enable slider in mobile devices just add the code in Web Block jQueryUI_1_8_24 after jquery.ui.mouse.js

 * jQuery UI Touch Punch 0.2.3
 * Copyright 2011–2014, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);