views:

33

answers:

2

Im trying to find a very very simple javascript slider. One that is the bare minimum, no fancy jquery, or other libraries involved. The simplest possible slider. With the minimum amount of code possible.

Thanks for the attention!

@ Roger Walsh:

Below the HTML code: The .js and the .css are identical to the example in the tutorial you send me. I guess I have to add some more info in the body section, but I dont understand what exactly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<html>
<head>

<title> Slider </title> 

<script type="JavaScript" src="slider.js"></script>
<link href="default.css" rel="stylesheet" type="text/css" />

</head>

<body>

<html>
<head>

<title> </title> 
<script type="text/javascript">
</script>

</head>

<body>

<div class="carpe_slider_display_holder">
<!-- Default value: 0 -->
<input class="carpe_slider_display" id="display1" type="text" value="100" />
</div>
<div class="carpe_horizontal_slider_track">

    <div class="carpe_slider_slit"> </div>
    <div class="carpe_slider" id="my_id" orientation="horizontal" distance="100" display="my_id" style="left: 100px;"> </div>
</div>

<!--<div class="carpe_horizontal_slider_track">
    <div class="carpe_slider_slit"> </div>
    <div class="carpe_slider"
        id="my_id"
        orientation="horizontal"
        distance="100"
        display="my_id"
        style="left: 100px;"> </div>
</div>
-->
</body>
</html>
A: 

Try this one:

http://carpe.ambiprospect.com/slider/

Roger Walsh
Nice thanks a lot! I am just trying to make it work. I did everything in the tutorial. But for some reason the slider displays but does not move. What can I have forgotten? Thanks again!
MacPython
no probs, not sure tbh, can you post a link to your demo?
Roger Walsh
A: 

If you want to code less and in quick time, I will recommend you to use an existing library for this.

Look at dhtmlx Slider

Simplest Slider Example

NAVEED