<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"demo.css"
/>
<
script
src
=
</
script
>
<
script
>
$(document).ready(function () {
$(".fit-val").change(main);
});
</
script
>
<
script
src
=
"demo.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"main"
>
<
div
class
=
"range_panel"
>
<
span
>
<
label
>GrayScale</
label
>
<
br
/>
<
input
id
=
"id1"
class
=
"fit-val"
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"0"
/>
</
span
>
<
span
>
<
label
>Blur</
label
>
<
br
/>
<
input
id
=
"id2"
class
=
"fit-val"
type
=
"range"
min
=
"0"
max
=
"10"
value
=
"0"
/>
</
span
>
<
span
>
<
label
>Exposure</
label
>
<
br
/>
<
input
id
=
"id3"
class
=
"fit-val"
type
=
"range"
min
=
"0"
max
=
"200"
value
=
"100"
/>
</
span
>
<
span
>
<
label
>Sepia</
label
>
<
br
/>
<
input
id
=
"id4"
class
=
"fit-val"
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"0"
/>
</
span
>
<
span
>
<
label
>Opacity</
label
>
<
br
/>
<
input
id
=
"id5"
class
=
"fit-val"
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"100"
/>
</
span
>
<
span
>
<
label
>Contrast</
label
>
<
br
/>
<
input
id
=
"id6"
class
=
"fit-val"
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"100"
/>
</
span
>
<
span
>
<
label
>Invert</
label
>
<
br
/>
<
input
id
=
"id7"
class
=
"fit-val"
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"0"
/>
</
span
>
<
span
>
<
label
>Saturate</
label
>
<
br
/>
<
input
id
=
"id8"
class
=
"fit-val"
type
=
"range"
min
=
"0"
max
=
"100"
value
=
"100"
/>
</
span
>
</
div
>
<
div
class
=
"image"
>
<
img
src
=
"demo.png"
/>
<
img
src
=
"demo.png"
class
=
"image_main"
/>
</
div
>
</
div
>
</
body
>
</
html
>