How to create a numeric slide as below; without using HTML5 and jquery library
Have you tried dhtmlxSlider ? Its a slide bar which uses simple Javascript, and HTML 4.01 strict.
I believe its compatible with most browsers, and free to download from this link here: Download link for dhtmlxSlider
Here is an example of the code to use dhtmlxSlider:
<script type="text/javascript">
var slider1;
function doLoadLiveDemo(){
slider1=new dhtmlxSlider(
"sliderBox1",
260,
"dhx_skyblue");
slider1.setImagePath("codebase/imgs/");
slider1.setStep(50);
slider1.attachEvent(
"onChange",
function(nv){document.getElementById("qual").value=nv;});
slider1.init();
</script>
You can use jQuery UI's Range Slider:
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
Check out the demo page here: http://jqueryui.com/demos/slider/range.html
Related
As it possible to not to download to project folder jQuery UI files?
Just added this link to my html file:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
and this to my js file:
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#price-filter" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#price-filter" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
It shows in Inspector that I have jquery slider inside my div, but it doesn't show content because there is no styles for it. How to display slider for customizing without downloading default files?
If you want to use JQuery's CDN for CSS then try https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
It's used on their example https://jqueryui.com/slider/
Alternatively you can use the following CDN https://cdnjs.com/libraries/jqueryui
EDIT:I work with JS UI Slider and I want for each year that value to increase with 0,62% Some ideas? How I can do it?
<script> $( function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 37,
min: 1,
max: 100,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); } ); </script>
IMAGE HIER
There is a HTML element called <input type="range">. You can style it with CSS although browser implementations differ greatly.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
I am trying to make a price slider with jQuery UI slider.
What I want to do is add "+" when the handle reaches the max value.
I added if statement but it didn't work.
<script>
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 2,
min: 1,
max: 50,
slide: function( event, ui ) {
$( "#amount").val( ui.value + "K");
if($( "#amount" ).val(ui.value)>50){
$( "#amount" ).val( ui.value + "K+");
}
}
});
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) + "K");
});
If somebody knows how to do this, that would be great.
Thank you!
The slide property should be:
slide: function( event, ui ) {
if(ui.value>=50)
$( "#amount" ).val( ui.value + "K+");
else
$( "#amount").val( ui.value + "K");
}
The problem was that $( "#amount" ).val(ui.value) is used to set the value of #amount, but the value was already being passed in through the ui param. Also, since the maximum value for the slider is 50, then you will never get above it, so you must use >= or even just == would work as well.
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 2007,
max: 2013,
values: [ 2008, 2010 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
$( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
In the code above i had taken a div with id slider-range i am using slider function for sliding.When i slide a slider am calling the event for sliding and displaying the values from 2007 to 2013. But i need to add some text such as 2007 to 2013 inside a div.Once we add this text to a div when we slide a slider to this year i need to get that value is there anyways to add customized text inside the slider div.
I am trying to perform a calculation and set an input value when the slider is moved. I can't get it to work, any help much appreciated. please see my code below:
if (modalContentCall[objname].private_use == true) {
$(this).append($('<div>').load('Content_for_injection.htm #private_use',function(){
$('#inputamount').change(function() {
var isinputamount = parseInt($('#inputamount').val());
});
$( "#slider-range-max" ).slider({
range: "max",
min: 0,
max: 100,
value: 0,
slide: function( event, ui ) {
$( "#slideramount" ).val( ui.value );
if (isinputamount > 0) {
$( "#actualamount" ).val( ui.value/100*isinputamount );
}
else $( "#actualamount" ).val(0);
}
});
$( "#slideramount" ).val( $( "#slider-range-max" ).slider( "value" ) );
$( "#actualamount" ).val( $( "#slider-range-max" ).slider( "value" ) );
Most of this code is standard UI code and works fine. I have added:
if (isinputamount > 0) {
$( "#actualamount" ).val( ui.value/100*isinputamount );
}
else $( "#actualamount" ).val(0);
}
and:
$( "#actualamount" ).val( $( "#slider-range-max" ).slider( "value" ) );
I want to take the input added to #inputamount multiply by the slider value (when this is moved) divided by 100 (to get a percentage decimal 1/100) to give a resulting number in #actualamount.
I can't seem to get it to work.
This issue was solved by using a global variable, I changed the 4th line of code in my question from this
var isinputamount = parseInt($('#inputamount').val());
to this
window.isinputamount = parseInt($('#inputamount').val());
It now works fine.