<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
place the image above the slider
in mobile view in bootstrap
</
title
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin
=
"anonymous"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"draft.css"
>
<
script
src
=
integrity
=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
style
>
body {
margin-top: 1rem;
margin-left: 2rem;
margin-right: 2rem;
}
.input {
margin-top: 3rem;
}
#rangeid {
padding: 0.5rem;
}
</
style
>
<
body
>
<
center
>
<
div
class
=
"container"
>
<
h1
style
=
"color:green"
class
=
"Hclass"
>
GeeksforGeeks
</
h1
>
<
div
class
=
"row flex-column-reverse flex-md-row"
>
<
div
class
=
"col-xs-12 col-sm-6 pull-right"
>
<
div
class
=
"input"
>
<
div
class
=
"slidecontainer"
>
<
input
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"100"
id
=
"rangeid1"
>
</
div
>
<
div
class
=
"slidecontainer"
>
<
input
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"0"
id
=
"rangeid"
>
</
div
>
<
div
class
=
"slidecontainer"
>
<
input
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"0"
id
=
"rangeid"
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col-xs-12 col-sm-6"
>
<
div
class
=
"output"
>
<
img
src
=
class
=
"img-fluid float-right"
id
=
"imgid"
width
=
"275"
height
=
"95"
>
</
div
>
</
div
>
</
div
>
</
div
>
</
center
>
</
body
>
<
script
>
var ranger = document.getElementById('rangeid1');
var image = document.getElementById('imgid');
var width = image.width;
var height = image.height;
ranger.onchange = function() {
image.width = width * (ranger.value / 100);
image.height = height * (ranger.value / 100);
}
</
script
>
</
html
>