语言

Menu
Sites
Language
volume slider events not fired

I would like to use volume slider to control volume like this;

            <div id="volume"><input id="volumeSlider" data-popup='true' type="range" value="5" min="0" max="10" data-icon='volume'/></div>

and I'd like to get the event when change volume.

            $("#volumeSlider").on("change", function(event, data) {
                console.log("volumeSlider change");
            });

but I can't get any message on changing the slider. "slidestart", "slidestop" events are also not fired.

Please let me know what I am missing.

Thank you.

choipd,

Seoul, Korea

列表

响应

2 回复
konduri sai swathi

Hi,

Try the below code.

HTML :

<ul data-role="listview">
<li>
<input id="volumeSlider" type="range" value="0" min="0" max="100" data-icon="text" data-text-left="0" data-text-right="100"/>    
</li>    
</ul>

JavaScript :

$(document).ready(function(){
    $("#volumeSlider").on('slidestart', function(event) {
        	console.log("slider moved");
    });
});

 

Marco Buettner

I have it implement like this

HTML

<input data-popup="true" type="range" name="slider" data-action-id="volume" value="10" min="0" max="15" data-icon="volume" data-text-left="Min" data-text-right="Max" />

JavaScript

$(document).on('change', '[name="slider"]', function() {myApp.events.onSliderAction($(this));});

var myApp = {};
myApp.events =
{
    onSliderAction: function(sliderItem)
    {
	    this._actionId = sliderItem.data('action-id');
	    this._val = null;

	    switch(this._actionId)
	    {
		    case 'volume':
			    this._val = sliderItem.val();
                console.log("volume level := " + this._val);
			    break;
	    }
    }
};

I use on all my HTML-Elements data-action-id for more main event functions :)