Slider Using PHP, Ajax And Javascript

Have you been searching for the slider script and implementing it in Ajax with PHP then you are in the right place buddy.Here is the post for you in which I’ve implemented javascript slider to work in Ajax using PHP. Ok let’s Begin it by creating the following tables in the database. Here is the mysql code to create the table named “tbl_slider” in database.

CREATE TABLE `tbl_slider` (
  `id` smallint(6) NOT NULL auto_increment,
  `slider_val` smallint(6) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) TYPE=MyISAM   ;

VIEW DEMO
DOWNLOAD SOURCE CODE

And now, there is a file slider.js which contains the code of javascript for the slider. I would like to say thanks to Tom Hermansson Snickars for the slider script. The main line you’ve notice in the slider.js is 164 where I’ve place the following code to call the Ajax function which is called when the slider is released after moving i.e on “onMouseUp” event.

setSliderVal(document.getElementById('slider1').style.left);

Slider1 is the if Division(div) which is available in the index.php file. The following code displays the slider in the index.php file.

<DIV class=carpe_slider_group>
 <DIV class=carpe_horizontal_slider_display_combo>
  <DIV class=carpe_slider_display_holder>
   <!-- Default value: 0 -->
   <input name="Input" class=carpe_slider_display id="display1" alue="<?=$row['slider_val']?>" />
  </DIV>
 <DIV class=carpe_horizontal_slider_track>
 <DIV class=carpe_slider_slit></DIV>
 <DIV class=carpe_slider id=slider1 display="display1" tyle="left:<?=$row['slider_val']?>px"></DIV>
</DIV>
</DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
</DIV>

As you can see above there is “<?=$row[‘slider_val’]?>” which is value of the slider stored in the database, the code for retrieving value from database look like this you can find this code in the index.php file

$link = mysql_connect('localhost', 'root', ''); //change the configuration if required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_slider'); //change the name of the database if equired
$query="SELECT slider_val FROM  tbl_slider WHERE id='1'";
$result=mysql_query($query);
$row=mysql_fetch_array($result);

And in the index.php there is Ajax function called “setSliderVal()” which is called from silder.js and use the ajax to call AJAX4Slider.php and retrive the current value of the slider from database.Here is the code of the AJAX4Slider.php

$sliderval=$_GET['sliderval']; //get the value from ajax function
$link = mysql_connect('localhost', 'root', ''); //change the onfiguration in required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_slider'); //change the name of the database if required
$query="UPDATE tbl_slider SET slider_val='$sliderval' WHERE id='1'";
$result=mysql_query($query);

The above code saves the value of the slider to the database.

VIEW DEMO
DOWNLOAD SOURCE CODE

Security Note : It is just a simple demo and If you want to use this code in your professional project then there is a security issue in the PHP code, please use $sliderval=intval($_GET[‘sliderval’]); in the php code instead of $sliderval=$_GET[‘sliderval’]; in the AJAX4Slider.php to prevent your site from sql injection attack.

69 thoughts on “Slider Using PHP, Ajax And Javascript

  1. cool, but I prefer the jQuery slider plugin…
    have you seen the shopify.com ‘s slider, two controls for MINIMUM and MAXIMUM values

  2. Hey, that’s a very cool little widget there. Of course, it needs some sort of design applied to it, but I can find lots of uses for it.

  3. Hey!…Thanks for the nice read, keep up the interesting posts..

  4. Alex93053

    I keep on getting the “req is not defined” error:

    req is not defined
    onreadystatechange()ajaxslider (line 27)
    (no name)(XMLHttpRequest, null)javascript: eval(… (line 1)
    setSliderVal(“47px”)ajaxslider (line 37)
    sliderMouseUp()slider.js (line 164)
    [Break on this error] if (req.readyState

    any idea where to define that?

  5. Danthehat

    Although it is pretty cool to have a slider hooked right into the database like that… is it really necessary? I mean, if you need the value associated with something other than a slider… say a number of orders or something–well then you’d have redundant data in your database: one value in your slider table and one in your order table.

    It makes much more sense to have those values stored at runtime.

  6. Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘roshan_usrtest’@’localhost’ (using password: YES)
    Could not connect: Access denied for user ‘roshan_usrtest’@’localhost’ (using password: YES)

  7. Ronald…….thanks for heads up….it was due to server change in last month and now i’ve fixed it..

  8. Adam

    Nice injection attack there.

    If you have this:

    $query=”UPDATE tbl_slider SET slider_val=’$sliderval’ WHERE id=’1′”;

    Then what if I pass the URL, manually:

    ?sliderval=A

    The script will crash. What if I pass

    ?sliderval=1′; TRUNCATE tbl_slider; DROP tbl_slider;

    On some databases, I’ve just nuked your database.

    Try this on index.php:

    $sliderval=(int) $_GET[‘sliderval’]; //get the value from ajax function

  9. @adam- you’re right and I was already aware of it and added a security note below but when magic quote is on sql injection attack is almost not possible…

  10. I thought about it and can’t seem to come up with a valuable idea as to why I would need a slider. Why would anyone need a slider?

    I see the code but don’t see the design and or idea.
    What could a slider do for me?

    Cheers

  11. Kevin

    Your ajax request gives an error. If u use an other request the error won’t display. So u don’t get the annoying javascript error at the bottom..
    thanks for the script though!

  12. 10+ Excellent Examples of Sliders in Ajax, Javascript and PHP
    http://www.navioo.com/javascript/dhtml/GUI_Components_227.dhtml

  13. Cheeray

    Thanks for the nice article, very useful, very neat, yet very plain to read for a non-english speaker like me.

  14. daft01

    you should really enhanced your code presentation dude.

  15. Thanks for the tutorial. Is there any way to make the number update in real time on a remote instance when the database number changes?

  16. I think it is nice tutorial

  17. Raj

    Thanks for this beautiful script.
    Really nice script

  18. Saira

    Excellent Examples of Sliders in Ajax, Javascript and PHP

    http://www.tutorials99.com

    Hope it’s helpful!

  19. Conixit

    This works really well. I intend to use it as a percent complete on a task list. However the increment of “1” is too small. I would like to see increments of 10, ie 10% 20% 30% 40% etc ..Possible?

  20. This is a nice article. Its easy to understand and implemented to this. I like to your article.
    Thanks:-)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>