I need to set the value of a slider if the value of another element changes and vice versa, but I'm having difficulty setting the value of another form element to the value of slider.
The function below changes the Slider value when the value of the Select element is changed, but I can't get it to work in reverse. I've posted a fiddle of it here: http://jsfiddle.net/chayacooper/v3gUg/28/
I'm using the jQuery Slider Plugin, jquery-1.8.2 and jquery-ui-1.9.1.
JS
$(document).ready(function () {
var select = $("#SliderSelect");
jQuery("#Slider").slider({
from: 1,
to: 5,
scale: ['Dislike', '', '', '', 'Love'],
limits: false,
step: 1,
dimension: '',
skin: "classic",
change: function (evt) {
$("#SliderSelect")[0].value = $(evt.target).slider("value");
}
});
$("#SliderSelect").change(function () {
jQuery("#Slider").slider("value", this.selectedIndex + 1);
});
});
I've also tried replacing the code with this statement and using a textbox instead of the select element, with the same result
$('#text_value').val( $(evt.target).slider("value") );
HTML
<div class="layout-slider">
<div id="Slider" type="slider" name="area" value="3"></div>
</div>
<select name="SliderSelect" id="SliderSelect">
<option>1</option>
<option>2</option>
<option selected=selected>3</option>
<option>4</option>
<option>5</option>
</select>
According to the doc you provided, you need to use onstatechange. Also, for some reason, the slider needs two values in order for it to work...
$(document).ready(function () {
var select = $("#SliderSelect");
jQuery("#Slider").slider({
from: 1,
to: 5,
scale: ['Dislike', '', '', '', 'Love'],
limits: false,
step: 1,
dimension: '',
skin: "classic",
onstatechange: function (evt) {
//evt.target was causing internal error
// $("#SliderSelect").val($(evt.target).slider("value"));
$("#SliderSelect").val(evt);
}
});
$("#SliderSelect").change(function () {
jQuery("#Slider").slider("value", this.selectedIndex + 1, this.selectedIndex + 1);
});
});
DEMO:
http://jsfiddle.net/dirtyd77/v3gUg/30/
Related
i am using select2 control and i want to display or set value which i retrive from database
how to set value to select2 which is retrive from database in ASP.NET MVC
i am using select2 control and i want to display or set value which i retrive from database
how to set value to select2 which is retrive from database in ASP.NET MVC
<script type="text/javascript">
$(document).ready(function () {
var selectedValue1 = '43,48,47,57';
$('#ddlCity1').select2({
minimumInputLength: 0, //for listing all records > set 0
maximumInputLength: 20, //only allow terms up to 20 characters long
multiple: true,
placeholder: "Select",
allowClear: true,
tags: false, //prevent free text entry
width: "100%",
ajax: {
dataType: 'json',
delay: 250,
url: '#Url.Action("GetCityList", "DemoMVC")',
data: function (params) {
return {
searchTerm: params.term
};
},
processResults: function (data) {
var newData = [];
$.each(data, function (index, item) {
newData.push({
//id part present in data
id: item.Id,
//string to be displayed
text: item.City
});
});
return { results: newData };
},
cache: true
},
});
$(".city1").on("select2:select", function (e) {
currentSelectedVal = $(e.currentTarget).val();
console.log(currentSelectedVal) // get selected values
});
$('.city1').on('select2:unselect', function (e) {
currentSelectedVal = $(e.currentTarget).val();
console.log(currentSelectedVal) // get selected values
});
});
</script>
//Dropdown with select2 control
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>City</label>
<select id="ddlCity1" class="city1" style="width:500px"></select>
</div>
</div>
</div>
I am using JQuery UI sliders in a mobile survey application. I can correctly capture the slider value if the label is clicked or the handle is moved to the label. My problem is that if the user does not click on a label/move the slider. I want to record the initial value of the slider. Here is the html where the slider goes:
<div class="well-lg">
<b>#Html.DisplayFor(model => model.QuestionsText)</b><div id="mySlideOutput"></div>
<br />
<div id="mySlideOutput"></div> // testing output of slider value
<br />
#*Include ID of EvaluationQuestion in ID of slider*#
<div id="slider-#(Model.ID)"></div>
#Html.Hidden("QR-" + #Model.ID)
</div>
Here is the Jquery code:
<script>
var items = ['Very Exceptional Results', 'Above Standard', 'Standard', 'Results Not Acceptable', 'Less Than Standard', 'N/A'];
#*var sliderDefault = $("#slider-#(Model.ID)"),
initialValue = 1;*#
// commented out code that was used to make sure the value is being populated at certain states
//NOTE: Needs to be changed to populate slider item labels from database.
$("#slider-#(Model.ID)").slider({
value: initialValue,
min: 1,
max: 6,
//step: 1,
slide: function (event, ui) {
$("#QR-#(Model.ID)").val(ui.value);
$('#mySlideOutput').html('ui-value = ' + ui.value);
},
#*stop: function(event, ui) {
$("#QR-#(Model.ID)").val(ui.value);
//alert(ui.value);
},*#
#*start: function(event, ui) {
$("#QR-#(Model.ID)").val(ui.value);
alert(ui.value);
}*#
});
$("#slider-#(Model.ID)").slider("pips", { rest: "label", labels: items });
I would like the initial value to populate the db if the slider is not moved to another option. Any suggestions? I appreciate the help.
$("#slider-#(Model.ID)").slider("value");
This will just return the value of the slider at any time it is called... whether you want to call this function at run time, or just before page unload is up to you.
I am trying to modify the function given in the jQuery UI demos for binding a slider to an existing select element in order to work with the jQuery Slider Plugin. The function should allow the user to change the value to either the slider or select element and it automatically updates the other element.
I've modified the function for the plugin to update the Slider when the value of the Select element changes, but I don't know how to modify the function so that the Select element is updated when the value of the Slider changes.
UPDATE - The plugin documentation has an 'onstatechange function()' which fires when the slider change state, but I'm not sure how to modify the code to meet my needs. The sample code given is: onstatechange: function( value ){console.dir( this ); }, and a fiddle using the onStateChange: function is posted here: http://jsfiddle.net/v3gUg/18
HTML & JS
<select name="SliderSelect" id="SliderSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="layout">
<div class="layout-slider">
<input id="Slider" type="slider" name="area" value="3"/>
</div>
<script type="text/javascript" charset="utf-8">
$(function () {
var select = $("#SliderSelect");
jQuery("#Slider").slider({
from: 1,
to: 5,
scale: ['Dislike','','','', 'Love'],
limits: false,
step: 1,
dimension: '',
skin: "classic"
});
$("#SliderSelect").change(function () {
jQuery("#Slider").slider("value", this.selectedIndex + 1);
});
});
</script>
</div>
Function used in the jQuery UI Demo
$(function () {
var select = $("#minbeds");
var slider = $("<div id='slider'></div>").insertAfter(select).slider({
min: 1,
max: 6,
range: "min",
value: select[0].selectedIndex + 1,
slide: function (event, ui) {
select[0].selectedIndex = ui.value - 1;
}
});
$("#minbeds").change(function () {
slider.slider("value", this.selectedIndex + 1);
});
});
Did you try specifying a function to respond to slider changes as the change attribute?
jQuery("#Slider").slider({
from: 1,
to: 5,
scale: ['Dislike','','','', 'Love'],
limits: false,
step: 1,
dimension: '',
skin: "classic"
// add this
change: function( event, ui ) {
//... add your response code here}
}
});
You can use onstatechange in place of the callback. The effect is that your function is fired as the slider is moving and it won't wait for a mouse up event
jQuery("#Slider").slider({
from: 0,
to: max_slider_val,
step: 1,
smooth: true,
round: 0,
dimension: " ",
skin: "plastic",
onstatechange: function( myvalue ){
console.log(myvalue);
} });
I have a jquery-ui slider which updates a textbox with the slider's value.
the textbox has ng-model so I can get the value from the controller - but the value is not updated after the slider is moved (the value is changing inside the textbox visually, but $scope.slider remains the same).
If I change the value manually inside the textbox everything is working as expected and the value of $scope.slider is updated with the new value.
Is there a way to make the slider update the value for the scope as well?
<input type="text" id="rent" ng-model="rent" style="border: 0; color: #f6931f; font-weight: bold;" />
<div id="slider-rent" style="width: 80%;"></div>
$("#slider-rent").slider({
range: false,
min: 0,
max: 20000,
step: 10,
value: 0,
slide: function (event, ui) {
$("#rent").val(ui.value);
}
});
$("#rent").val($("#slider-rent").slider("value"));
$("#rent").change(function () {
$("#slider-rent").slider("value", $("#rent").val());
});
(This is a rtl slider, this is why the values are negative)
It would be better to put your slider code into an angular directive so you can access the controller scope.
However if you trigger input event on the input element it will update the angular model
function updateInputValue( newVal){
$("#rent").val(newVal).trigger('input');
}
$(function () {
$("#slider-rent").slider({
range: false,
min: 0,
max: 20000,
step: 10,
value: 0,
slide: function (event, ui) {
updateInputValue(ui.value);
}
});
updateInputValue($("#slider-rent").slider("value"));
$("#rent").change(function () {
$("#slider-rent").slider("value", $("#rent").val());
});
})
DEMO:http://jsfiddle.net/zwHQs/
Try this:
slide: function (event, ui) {
$scope.rent = ui.value;
}
The above assumes the code you show is inside/wrapped in a directive.
I want to embed the max of my sliders range in an html data parameter. I did some debug, and despite the fact that the data can be accessed and is a number, the slider will still use the default max of 100.
My HTML:
<div class="slider" data-max="10"></div>
<label for="slider_value">Slider Value:</label>
<input type="text" id="slider_value" />
My Javascript:
$(document).ready(function () {
$("div.slider").slider({
min: 0,
max: $(this).data("max"),
slide: function (event, ui) {
$("input#slider_value").val(ui.value);
}
});
});
See this fiddle
When the argument object for slider() is evaluated, this is a reference to the document object, not div.slider. You'd need to find div.slider again or save a reference to it (demo):
$(document).ready(function () {
var div = $("div.slider");
div.slider({
min: 0,
max: div.data("max"),
slide: function (event, ui) {
$("input#slider_value").val(ui.value);
}
});
});
Use the jQuery UI create event with option method to set options dynamically:
$(document).ready(function() {
$('div.slider').slider({
min: 0,
create: function(event, ui) {
$(this).slider('option', 'max', $(this).data('max'));
},
slide: function(event, ui) {
$("input#slider_value").val(ui.value);
}
});
});