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`)


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.


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 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 class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></DIV>
<DIV class=carpe_horizontal_slider_display_combo></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'";

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'";

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


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.

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

69 Comments on “Slider Using PHP, Ajax And Javascript”

  • fedmich wrote on 14 January, 2008, 2:05

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

  • Staxitix wrote on 16 January, 2008, 4:22

    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.

  • Kim Smith wrote on 19 January, 2008, 12:05

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

  • Alex93053 wrote on 21 February, 2008, 12:52

    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?

  • Danthehat wrote on 22 February, 2008, 22:34

    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.

  • ronald wrote on 7 April, 2008, 16:43

    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)

  • Roshan wrote on 8 April, 2008, 8:35

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

  • Adam wrote on 17 October, 2008, 14:25

    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:


    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

  • Roshan wrote on 19 October, 2008, 10:45

    @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…

  • M.Dubb wrote on 2 December, 2008, 16:07

    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?


  • Kevin wrote on 3 December, 2008, 12:33

    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!

  • Cristian wrote on 20 February, 2009, 19:45

    10+ Excellent Examples of Sliders in Ajax, Javascript and PHP

  • Cheeray wrote on 23 February, 2009, 23:16

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

  • daft01 wrote on 27 April, 2009, 12:06

    you should really enhanced your code presentation dude.

  • andy Peacock wrote on 21 January, 2010, 20:43

    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?

  • ?? ???????? wrote on 27 February, 2010, 20:52

    I think it is nice tutorial

  • Raj wrote on 25 March, 2010, 13:07

    Thanks for this beautiful script.
    Really nice script

  • Saira wrote on 30 April, 2010, 6:28

    Excellent Examples of Sliders in Ajax, Javascript and PHP

    Hope it’s helpful!

  • Conixit wrote on 27 May, 2010, 22:44

    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?

  • php techie wrote on 22 June, 2010, 8:51

    This is a nice article. Its easy to understand and implemented to this. I like to your article.


  1. Caminews »
  2. napyfab:blog» Blog Archive » links for 2008-01-14
  3. Slider in Ajax, Javascript and PHP
  4. My content is stolen over - Please help
  5. 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars
  6. 30? Ajax/Javscript ???, ????????? | ????
  7. 50 Excellent AJAX Tutorials | Tutorials | Smashing Magazine
  8. Useful AJAX Tutorials | Neurosoftware web dev
  9. 50 Excellent AJAX Tutorials | POLPDESIGN
  10. 50 Excellent AJAX Tutorials | Web Burning Blog
  11. 50+ Great Ajax Tutorial | Tech User, Blogger and Designers References
  12. 50 Excellent AJAX Tutorials | Evolution : weblog
  13. 50 Excellent AJAX Tutorials | How2Pc
  14. 50 Excellent AJAX Tutorials « Rohit Dubal
  15. Best Ajax Tutorials and Dynamic Solution for PHP ,,Ruby On Rails | Click On Tech
  16. 30? Ajax/Javscript ???, ????????? |
  17. 150 AJAX Tutorials »
  18. Best of 158 Ajax Framework,JavaScript Libraries and Toolkit Tutorials | Click On Tech
  19. Ajax Frameworks,JavaScript Libraries and Toolkit Tutorials | Dev Techie
  20. 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars | YABIBO.COM - YOUR WEB WORLD
  21. 30? Ajax/Javscript ???, ????????? | ????
  22. 50 Excellent AJAX Tutorials | 9Tricks.Com - Tips - Tricks - Tutorials
  23. 55 Awesome PHP Tutorials for Noobs — ProgrammerFish - Everything that's programmed!
  24. 55 ??????? PHP ???? ???? ??? ?? « ?????? ????? ????? ?? ???? ? ?????? ????? ? ??? ??
  26. 100 Essential Web Development Tools - Noupe
  27. 100 Essential Web Development Tools | The circuits of imagination
  28. 100 Essential Web Development Tools | Best Web Magazine
  29. 100 Essential Web Development Tools | Yooxe
  30. 100 Essential Web Development Tools » Shai
  31. Web Development Tools -
  32. [?]Web ?????????????? | G.
  33. Web?????????????? | ????
  34. Web ??????????? - ??????
  35. Web ?????????????? « ???????
  36. Web ?????????????? | Crow
  37. Web ?????????????? « ??
  38. ??????-Web????? « web????
  39. 100 Essential Web Development Tools « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates
  40. Will Chou's Blog » Web?????????????????
  41. Web ??????????? | Haozi's Blog
  42. Web ?????????????? « ?????
  43. 100 Essential Web Development Tools | Afif Fattouh - Web Specialist
  44. Web?????????????? - ??????
  45. Web ??????????? - ???????????? – ??? -
  46. 30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars |
  47. Web ??????????? : : Full House
  48. Web ?????????????? | MJsee
  49. 30+ Javascript / Ajax Techniques for Sliders, Scrollers and Scrollbars | Information Square

Write a Comment


Copyright © 2015 Roshan Bhattarai's Blog. All rights reserved.
Powered by, Custom Theme and Calling Card Company.