Question

Can the shape of horizontal slider in jQuery mobile be changed to semi circular?

http://jquerymobile.com/test/docs/forms/slider/

I am looking in to the js file but clueless as to how to approach it. I am looking into it so that I can use it in an Android app.

Any suggestions please?

Answer 1

Here is the initialized HTML for that widget:

<div role="application" class="ui-slider  ui-btn-down-c ui-btn-corner-all">
    <a href="#" class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-valuetext="33" title="33" aria-labelledby="slider-0-label" style="left: 33%; ">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text"></span>
        </span>
    </a>
</div>

As you can see it’s just a DIV element. So you can assign a different background-image to the DIV to show a circular track but to get the slider to move in a circular fashion will be much harder.

Here’s your start:

var mousedown = false;
$(document).delegate('.ui-slider-handle', 'mousedown mouseup mousemove', function (event) {
    if (event.type == 'mousedown') {
        mousedown = true;
    } else if (event.type == 'mouseup') {
        mousedown = false;
    } else if (mousedown) {
        var max     = 150,
            percent = (parseInt(this.style.left) / 100);
        this.style.top = (50 - (Math.sin(percent) * max)) + '%';
    }
});​

And a Demo: http://jsfiddle.net/yRrYL/1/