hi there regarding the pathslider.

[gerble1000]

i have it curved exactly how i want it and its moving freely. my question is how do i set the position using javascript and how would i use it the same way as i am using this volume control.

<input type="range" id="volume"  width="500" height="20px" min="0" max="100" step="1"oninput="actions(this.id,this.value);" onchange="actions(this.id,this.value);"/>

i would like to use 2 sliders on the same page. any chance you could give me an example on how to interact with the slider please. BTW i love it, very easy to implement :)

my email address is gerble1000@hotmail.com

[Mottie]

Hi @gerble1000!

Using an input would be a good idea, but it is not currently supported. I know this plugin needs a lot of work, I haven't touched it in a long time because there didn't seem to be any interest in it, until now ;)

It works like every other plugin, if both sliders are the same, use a class selector $('.slider'). If they are different, you'll need to call the plugin twice with different settings.

I set up this demo for you with buttons to set the slider position:

$('.set').click(function () {
    var val = parseFloat($(this).html(), 10);
    $('#slider').pathslider(val);
    // $('#slider').data('pathslider').setSlider( val ); <- this also works
});

Because the plugin is still a work-in-progress (alpha release), it's still missing some basic functionality like setting a minimum, maximum and step value. And it only works with percentage values from 0 to 100%.

You can get the current value at any time using this code:

$('#slider').data('pathslider').percent

or within a slider triggered event, like start or change as follows (full docs):

$('#slider').on('change.pathslider',function(e, slider){
    // slider = $('#slider').data('pathslider');
    $('span').html( slider.percent );
});

If you have any other questions, I'll try to answer them here so that it may benefit others trying to use this plugin in the future.

[gerble1000]

thank you so much. this will help a lot. i plan to use this on my linux jukebox software i am developing. if thats ok :)

[gerble1000]

i have the sliders usable now. but is there a way to set the slider using javascript inside a javascript function like document.getelementbyid('slider').data('pathslider').percent = 50;

or is there a way for the pathslider to change itselft when a global variable has changed. i am trying to implement the track seek function on my mp3 player :)

[gerble1000]

i am quite familier with javascript but have never looked into jquery, and god its different.

[gerble1000]

oh please ignore my last post as i just figured it out. $('#slider').pathslider(50); works fine :)

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.