Search jQuery

jQuery Forum

Using jQuery UI

李想 Sameer

Jquery UI Multiple Slider Display Custom Handle value with Input Text Box (SOLVED)

in Using jQuery UI • 2 years ago

I have dynamic multiple input and dynamic slider handler so when on change input text value need to set slider value but I can't set slider handler check below code.

HTML:

<table>
<tr>
<td>
<div class="divSlider">
<div style="margin:0px" id ="bonusScore" Style="width:100px;">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
</div>
</td>
<td>
<input type="text" name="assesmentScore" class="input-mini" />
</td>
</tr>
</table>

SCRIPT:

$(function(){
$(".divSlider").each(function(index,value ) {
var handle = $("#custom-handle",$(this));
var myslider =$("#bonusScore", $(this)).slider({// $this is a reference to .slider in current iteration of each
orientation:"horizantal",
range: "min",
value:50,
step: 10,
min:10,
max:100,
animate: "fast",// handle smoothly when the user clicks on the slider track
create: function() {
handle.html( $( this ).slider('value'));
$(this).find('.ui-slider-handle').html($( this ).slider('value'));
} ,
slide: function( event, ui ) {
$(this).find(".ui-slider-handle").html(ui.value);
$("#bonusScore").slider().find(".ui-slider-handle");
$(this).parents("tr").find('input[name="assesmentScore"]').val(ui.value);
}
});
//Change Slider wit I/p
$(this).parents("tr").find('input[name="assesmentScore"]').change( function (event) {
var textValue = $(this).parents("tr").find('input[name="assesmentScore"]').val();
// above line I can get each input text box so I need to set slider handler value based on corresponding value
myslider .slider('value',textValue); //now I can set slider value
handle .text(textValue);//Now i can see handle value
});
});
});

Replies(5)

coldfusio..

Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

2 years ago

Hello,

I wrtoe some code based on this, "I have dynamic multiple input and dynamic slider handler so when on change input text value need to set slider value but I can't set slider handler check below code"

I think you want the slider to change when the text input changes and the text input to change when the slider changes:

Code below:

<!doctype html>

<head>

<title>jQuery UI Slider - Slider bound to select</title>

$( function() {

var textinput = $( "#assesmentScore" ).val();

$("#assesmentScore").keyup(function(){

// alert(this.value);

textinput= this.value;

});

var myslider = $( "#slider" ).slider({

min: 10,

max: 100,

range: "min",

value: $("#assesmentScore").val(),

slide: function( event, ui ) {

$("#assesmentScore").val(ui.value);

}

});

$( "#assesmentScore" ).on( "keyup", function() {

myslider.slider( "value", this.value );

});

</script>

</head>

<body>

<label for="assesmentScore">assesmentScore</label>

</form>

</body>

</html>

I used http://jqueryui.com/slider/#hotelrooms as a starting point.

Jim

李想 Sameer

Re: Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

2 years ago

Thanks for replied me It's awesome working I need to display text value based on slider move so I used below code in my on keyup input text .

<div style="margin:0px" id ="bonusScore" Style="width:100px;">
<div id="custom-handle" class="ui-slider-handle"></div>
<input type="text" name="assesmentScore" class="input-mini" /input>

$(this).parents("tr").find('input[name="assesmentScore"]').on("keyup", function (event) {
bonusSlider.slider("value",textValue);
$(this).find('.ui-slider-handle').html(textValue); // can't see after change slider value
});

coldfusio..

Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

2 years ago

That snippet above, has duplicate code:

see this CodePen instead:

https://codepen.io/anon/pen/KZLZrr

Jim

kbwood.au

Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

2 years ago

You say you have multiple of these elements, so you can't use IDs since these must be unique within the document. Use classes instead and navigate from one element to the other:

$(this).closest('tr').find('input[name="assessmentScore"]') // from slider to input
$(this).closest('tr').find('.bonusScore') // fro input to slider

李想 Sameer

Re: Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

2 years ago

So mean -while can set slider handle text value based on input ?Slider Move Handle text

Top Reply

Response title

Attachments

jQuery Forum

Jquery UI Multiple Slider Display Custom Handle value with Input Text Box (SOLVED)

Replies(5)

Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

Re: Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

Re: Re: Jquery UI Multiple Slider Custom Handler with Input Text Box

Statistics

Tags

Actions

Related Posts