Cjuislider Insert Value On The Fly

Yii 1.1 General Discussion
1

This is my result I am looking to achieve. I have a CJuiSlider on my view. I initially start out with say 5 values

0, 20, 30, 50, 99.




|0-----20----30-------50--------------99|

                              ^

                          Insert value here (75 for example)

I want to set up something like ctrl+lclick to insert a new value. Where my rudimentary diagram shows. Is there a way to do this?

2

Have you tried to set the value for the CJuiSlider using jquery based on the right click event?

3

check this

i hope it’s some help.

4

I am not sure what you mean, can you explain a little more?

I have looked at this before, not seeing anything like I am trying to do. This is just updating a div with the value that is already predefined and then adjusted.

I am trying to insert a whole new value on the fly using a combo of keyboard key + lclick. More so is this even possible to do?

5

Inside keyboard / mouse events this is my solution.




                // Calculate the value clicked on in the slider

                var sliderWidth = $('#slider').width();

                var maxValue = $(this).slider('option', 'max');

                var offset = $(this).parent().offset(); 

                var mouseX = mouse.pageX - offset.left;

                var newValue = Math.round(((maxValue / sliderWidth) * mouseX) - 1);


                // Get the sliders original values

                var values = $(this).slider('values');


                // Append the new value to the current values and sort by value ascending

                values[values.length] = newValue;

                values = values.sort();

                

                console.log('New Values: ' + values);                

                // Set the new values in the slider

                $(this).slider('option', 'values', values);

                                

                // Rebuild the slider handles

                var tabs = '';

                count = 1;

                var leftPercent = 0;

                $.each(values, function (index, value) {

                    leftPercent = Math.round((value / maxValue) * 100);

                    console.log(leftPercent);

                    tabs += '<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" id="'+(count++)+'" style="left: '+leftPercent+'%;"></a>';

                });

                $('#slider').html(tabs);

EDIT: Issue was found with this solution that causes the slider to become unresponsive when trying to move the handles around.