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)
Related
With one element all right, but here throwing error "el.roundSlider is not a function", Jquery connected before main js file, With Jquery .each the same thing
const scArr = Array.from($('.slider'));
scArr.forEach(el => el.roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
value: 150,
width: 10,
min: 0,
max: 200
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
$(el) seems to do the trick:
const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
value: 150,
width: 10,
min: 0,
max: 200
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
Each element inside of a jquery array isn't a jquery object, it's actually a node element I believe. Try this in your browser: $('p')[0] instanceof Element
Just use the jquery class selector directly
$('.slider').roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
value: 150,
width: 10,
min: 0,
max: 200
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
When i change the value in one slider, it updates in all at the same time, how can i fix it? BY the way, i want to get value from element with current index of array and use it, is that possible, or exist better solution?
const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
value: 150,
width: 10,
min: 0,
max: 200,
update: function (args) {
$('.value').html(`${args.value} %`);
}
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="container">
<div class="slider"></div>
<div class="value">0 %</div>
</div>
<div class="container">
<div class="slider"></div>
<div class="value">0 %</div>
</div>
The reason for the value getting update in all element is, the generic selector was used $('.value') which will update in all elements. Instead of that you can update the element based on the current target.
Also to set the value from the element, you can get the value and apply that. Check the below modified demo:
const scArr = Array.from($('.slider'));
scArr.forEach(el => $(el).roundSlider({
radius: 80,
circleShape: "half-left",
sliderType: "min-range",
showTooltip: false,
width: 10,
min: 0,
max: 200,
svgMode: true,
value: $(el).attr("data-value"),
valueChange: function (args) {
var slider = args.control;
slider.parent().find('.value').html(`${args.value} %`);
}
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.6.1/roundslider.css" integrity="sha512-XO53CaiPx+m4HUiZ02P4OEGLyyT46mJQzWhwqYsdqRR7IOjPuujK0UPAK9ckSfcJE4ED7dT9pF9r78yXoOKeYw==" crossorigin="anonymous" />
<div class="container">
<div class="slider" data-value="50"></div>
<div class="value">0 %</div>
</div>
<div class="container">
<div class="slider" data-value="120"></div>
<div class="value">0 %</div>
</div>
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
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.
<!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