We have using JQuery ui Slider but after clone it we had faced these matters
New cloned slider not sliding !!
When input value changed, All of sliders not sliding and background not changed !!
You can see a live example here
https://jsfiddle.net/earngate/ohfco7zn/1/
HTML
<!-- HTML Code -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="entry" class="markup scoreSlide">
<input type="text" id="" class="scoreID" value="3" />
<div class="scoreSlider"></div> <p />
</div>
<input type="button" id="btnAdd" value="add new slider">
Javascript
$(window).load(function(){
jQuery(".scoreSlide").each(function(){
jQuery(this).find('.scoreSlider').slider({
animate: true,
range: "min",
value: jQuery('.scoreID').val(),
min: 1,
max: 10,
step: 1,
slide: function(event, ui) {
$(this).parent().find('.scoreID').val(ui.value);
}
});
});
$('#btnAdd').click(function () {
$(".scoreSlide:last").clone(true,true).insertBefore(this);
});
});//]]>
You have to reuse the slide function when you click the button.
https://jsfiddle.net/ooxwtyog/
function sliding(){
jQuery(".scoreSlide").each(function(){
jQuery(this).find('.scoreSlider').slider({
animate: true,
range: "min",
value: jQuery('.scoreID').val(),
min: 1,
max: 10,
step: 1,
slide: function(event, ui) {
$(this).parent().find('.scoreID').val(ui.value);
}
});
});
}
clone option is to copy events as well.
additional changes are required to apply element to the parts applying slider.
https://api.jquery.com/clone/#clone-withDataAndEvents
Related
I'm using ui jquery slider, but i'm not able to get the value.
$("#ex1").slider({
value: 1400,
min: 1400,
max: 12000,
step: 20,
slide: function(event, ui) {
$("#slider-value").html(ui.value);
}
});
$("#slider-value").html($('#ex1').slider('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input id="ex1" data-slider-id='ex1Slider' type="range" data-slider-min="1400" data-slider-max="12000" data-slider-step="20" data-slider-value="0" /><b class="price-left">
<span id="slider-value"></span>
Can anyone help me with this?
Your issue is because you're instantiating the slider() on a input type="range" element. It should be used with a plain div. Change that and the rest of your code works fine:
$("#ex1").slider({
value: 1400,
min: 1400,
max: 12000,
step: 20,
slide: function(event, ui) {
$("#slider-value").html(ui.value);
}
});
$("#slider-value").html($('#ex1').slider('value'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<div id="ex1" data-slider-id='ex1Slider' data-slider-min="1400" data-slider-max="12000" data-slider-step="20" data-slider-value="0"></div>
<span id="slider-value"></span>
The slider documentation has full explanations of all other methods and properties you can use.
$('#ex1').slider("option", "value");
You can try this one (y)
I have searched stackoverflow but I couldn't find a solution for my case.
I am doing a simple interactive visualization with D3. I want to include a range slider for users to select a range. Then create a filter function that filters the data based on the selected range and updates the visualization. The range slider just does not show up in my browser (both Chrome and Safari).
Relevant code:
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="layout">
<div id="title">
<p>Stocks Scatterplot</p>
</div>
<div id="visualization">
<div id="controls">
<!--create the sliders here-->
<p>Assists</p>
<div id="assists" class="d3-slider"></div>
<label for="assistamount">Assists range:</label>
<input type="text" id="assistamount" readonly style="border:0; color:#f6931f;
font-weight:bold;">
</div>
</div>
</div>
</body>
jQuery:
$(function() {
$("#assits").slider({
range: true,
min: 0,
max: maxAssists,
values:[0,maxAssists],
slide: function(event, ui) {
$("#assistamount").val(ui.values[0]+"-"+ui.values[1]);
filterAssists(ui.values);}
});
$("#assistamount").val($("#assits").slider("values",0) + "-" + $("#assits").slider("values",1));
});
Any thoughts? Thanks in advance.
You have a typo!!
$("#assits") should be $("#assists").
I guess you have defined maxAssests before the slider definition as well.
Also use more up to date versions of jquery & ui. I got your code to work with these.
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am working on a price range slider. I am following the jQuery guide and use them as reference.
My problem is that I can't add dragable behavior on the actual slider. I've researched and have tried to add jquery.ui.touch-punch.min.js, however it did not solve my problem.
Please see below my code:
$(function() {
$("#slider-range-min").slider({
range: "min",
value: 400,
min: 400,
max: 2000,
slide: function(event, ui) {
$("#amount").val("£" + ui.value);
}
});
$("#amount").val("£" + $("#slider-range-min").slider("value"));
$('#slider-range-min').draggable();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<p>
<label for="amount">Maximum price:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>
You will need to make sure you're correctly loading the:
<script src="jquery.ui.touch-punch.min.js"></script>
Your current code expects this file to be in the same folder as your HTML page, if it's hosted elsewhere you will need to change the link or use a CDN of some form.
I have a slider in my code. when I click I click on it, it alerts a message "called". But the problem here is it is alerting the message only when the square on the slider is clicked but I want to alert a message after clicking anywhere on the slider.
Here is my code.
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(function () {
$("#slider-1").slider({
range: true,
min: 0,
max: 500,
values: [0, 0],
slide: function (event, ui) {
$("#priceA").val("$" + ui.values[0] + " - $" + ui.values[1]);
},
stop: function () {
getValues();
}
});
});
$("#slider-1").click(function(){
alert('Called');
});
});
</script>
</head>
<p>
<label for="priceA">Price rangeA:</label>
<input type="text" id="priceA" style="border:0; color:#067ab4; font-weight:bold;">
</p>
<div id="slider-1" class="myClass"></div><br><br>
</html>
Do you want that even clicking randomly on the slider should alert a message:: then try this:
stop: function () {
alert('called');
getValues();
}
and here is DEMO LINK , check it out.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<input type="text" value="" id="rateToPost"/>
<script type="text/javascript">
var my = document.getElementById("rateToPost").onchange();
alert(my);
</script>
<div style="width:75px;height:48px;">
<div style="width: 5px;margin-left: 10px;">1</div>
<div style="width: 5px;margin-left: 38px;margin-top: -10px;">2</div>
<div style="width: 5px;margin-left: 70px;margin-top: -13px;">3</div>
<div style="width: 5px;margin-left: 98px;margin-top: -12px;">4</div>
<div style="width: 5px;margin-left: 124px;margin-top: -12px;">5</div>
</div>
<script>
$(document).ready(function() {
$("#slider").slider({
range: "min",
value: 2,
min: 1,
max: 5,
//this gets a live reading of the value and prints it on the page
slide: function( event, ui ) {
$( "#ratingResult" ).text( ui.value );
},
//this updates the value of your hidden field when user stops dragging
change: function(event, ui) {
$('#rateToPost').attr('value', ui.value);
}});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
In the above script I used a slider for rating. But what is the problem here is I have to fetch the text box value onchange and highlight the corresponding rating number background. But I cant fetch the value. Anyone can help to solve thisproblem. Thanks in advance
Try this using jQuery:
$('#rateToPost').on("change", function () {
alert($(this).val());
});
Since $('#rateToPost') is a form element: Use the val() method.
assign value: $('#rateToPost').val(ui.value);
read value: var res = $('#rateToPost').val();
$('#rateToPost').keyup(function(){
$('#slider').slider({value: this.value});
});
Demo http://jsbin.com/azosab/2/edit