I am trying to create a responsive slider. I have searched for many horizontal slider examples and found this one to be the most straight forward and simple. Now I want to adapt the code to make it responsive. When the slider is for example on 2013 than something should happen. All I need to know is where in the code I would implement this. So if anybody could help adapting underneath code that would be very helpful. Just a different print statement for each number that could be slided to would be awesome. Thank you in advance!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Slider bound to select</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var select = $( "#minbeds" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 8,
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 );
});
});
</script>
</head>
<body>
<form id="reservation">
<label for="minbeds">Minimum number of beds</label>
<select name="minbeds" id="minbeds">
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
</select>
</form>
</body>
</html>
This happens in the slide function
slide: function( event, ui ) {
console.log(ui.value); // prints 1 for 2013, 2 for 2014 ...
select[ 0 ].selectedIndex = ui.value - 1;
}
To make it responsive, use something like this
slide: function( event, ui ) {
var index = ui.value-1;
select[ 0 ].selectedIndex = index;
if (select[0][index].text === "2013") { // text works, but innerHTML, innerText and label do too
console.log("2013!");
}
}
Related
i'm creating a project to change color, contrast ... of a picture. I use filtrr plugin. I want to use slider to choose value of effect
It works well but it's not fast enough.
You can download plugin here to execute code : https://github.com/alexmic/filtrr/tree/master/filtrr2
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<style>
#slider {
width: 200px!important;
}
</style>
</head>
<body>
<div id="slider"></div>
<img id="img" src="./o8rvhb.jpg">
<canvas class="main" width="1024" height="512"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="./filtrr2.js"></script>
<script src="./util.js"></script>
<script src="./effects.js"></script>
<script src="./layers.js"></script>
<script src="./events.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var i = 0;
$( "#slider" ).slider({
max: 100,
min: 0,
orientation: "horizontal",
slide: function(t, e) {
$( "img" ).hide();
Filtrr2.fx( 'color', function( value ) {
value = Filtrr2.Util.clamp(value, -100, 100);
this.process(function(rgba) {
rgba.r += value;
});
});
var canvas = document.createElement( "canvas" );
canvas.setAttribute( "id", "test" + i );
canvas.setAttribute( "width", 1024 );
canvas.setAttribute( "height", 512 );
var canvasCtx = canvas.getContext( "2d" );
canvasCtx.drawImage( $( "img" )[0], 0, 0 );
$( "body" ).append( canvas );
var newfilter = Filtrr2( "#test" + i, function() {
this.contrast( e.value ).color( e.value ).render();
} )
$( ".main" )[0].getContext( "2d" ).drawImage( $( "#test" + i )[0] , 0, 0 )
$( "#test" + i ).remove();
i++;
},
stop: function(t, e) {
}
});
} )
</script>
</body>
</html>
I'm trying to combine two examples to make a vertical slider with a custom handle that displays its value.
https://jqueryui.com/slider/#custom-handle
https://jqueryui.com/slider/#slider-vertical
I was able to get the slider to move and update the value on the naked vertical slider example by selecting the slider with a css class but this won't work for me since I will have numerous sliders on the page.
Any advice on how I can get this slider to work right?
Codepen example here:
https://codepen.io/cschroeder/pen/EXXqqv
js:
$( function() {
var handle = $( "#custom-handle" );
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 9,
value:0,
create: function() {
handle.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
//$(".ui-slider-handle").text(ui.value);
handle.text( ui.value );
}
});
} );
HTML:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<div id="slider-vertical" style="height:200px;">
<div id="custom-handle" class="ui-slider-handle"></div>
</div>
CSS:
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
Remove the line "top: 50%" from your CSS markup. In vertical orientation, the slider code is changing the "bottom" parameter but it has no effect while the "top" parameter is set.
I have just started learning html, css and js and I recently had to create a price slider range in a website that will be reasonable in it.
I would like to know how can I reposition it. I've copied the entire code from this link http://jqueryui.com/slider/#range however, the positioning is at the top of the web browser and it takes up the entire width of the browser as well
Is there anyway I can make it like adidas web page does it? http://shop.adidas.com.sg/men.html
At the side of the web browser and the size is kinda small ?
terribly sorry if I sound extremely dumb but I have no experienced in this.
Visit https://jsfiddle.net/vexsc7d8/1/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
/**** In style.css add class .container { float:left; width:200px;} ****/
<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 ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div class="container">
<div id="slider-range"></div>
</div>
</body>
</html>
I would hazard a guess you just haven't put it within a div and therefore it's taking up 100% of page body instead of 100% of a div sized as you need.
Hope this helps, just a last minute idea for you before I go home from work lol
Regards
Liam
to shape the way a component looks you'll need to use CSS.
1 option is to create a div tag around the slider html element and use css to change its side using with width property.
#divContainingSlider {
width: 100px;
}
I am testing my jquery skills and want to use the slider found in the jquery ui over here. I have tried implementing this on my code but the slider does not appear. All that appears is 'Rpice Range: $75- $300'. I have tried making sure I have the right jquery version. This is my code. Nothing too complex, just my trying to test out the slider:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.js">
<style>
div{
padding-right: 30%;
padding-left: 30%;
}
</style>
<script>
$(document).ready(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 ) );
});
</script>
</head>
<body>
<div> <h1>Resorts 'R' Us</h1>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
</body>
</html>
I looked at the console window when my chrome browser was running it but there was no error. So why is this not displaying? Also another question, would I be able to use bootstrap with all the jquery uis?
I have a simple JQuery slider on a Rails ERB page. I'm trying to get an alert to fire on change but it just isn't happening.
For what it is worth, the slider does work.
I've placed this code in home.html.erb.
Can anyone tell me where I'm going wrong?
<html>
<head>
<style media="screen" type="text/css">
h1 {
font-family: Helvetica, Arial;
font-weight: bold;
font-size: 18px;
}
body, p {
font-family: Helvetica, Arial;
}
</style>
<!-- Load jQuery and jQuery UI -->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load the jQuery UI CSS -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- jQuery UI Slider code -->
<script>
// When the browser is ready...
$(function() {
// Create a new jQuery UI Slider element
// and set some default parameters.
$( "#slider" ).slider({
range: "min",
value: 50,
min: 20,
max: 300,
slide: function( event, ui ) {
// While sliding, update the value in the #amount div element
$( "#amount" ).html( ui.value );
},
change: function (event, data) {
alert(data.value)
}
});
// Set the initial slider amount in the #amount div element
var value = $( "#slider" ).slider( "value" );
$( "#amount" ).html( value );
});
</script>
</head>
<body>
<!-- The div that is used as the slider container -->
<div id="slider" style="margin-top:100px;"></div>
<br /><br /><br />
<!-- The div that is used to display the slider value -->
<div id="amount" style="color:#777;font-size:72px;text-align:center;"></div>
</body>