Home/ Questions/Q 3854924
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T17:41:50+00:00

Im reading alot of slideable data from a database, each carrying a unique id,

  • 0

Im reading alot of slideable data from a database, each carrying a unique id, for instance 18056.

So with JQuery ive made a graphical userinterface that shows a slider and a label for each slidable value that i output to the page, typical:

<html>

    <head>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
        <script type="text/javascript">
            $(function(){

                $(".slider").slider({

                    range: true,
                    min: 0,
                    max: 100,
                    values: [parseInt($("#from"+(this.id).split("slider")[1]).text()), parseInt($("#to"+(this.id).split("slider")[1]).text())],

                    slide: function( event, ui ) {

                        $("#from"+this.id.split("slider")[1]).text(ui.values[0]);
                        $("#to"+this.id.split("slider")[1]).text(ui.values[1]);
                    }

                    });             
            });
        </script>
    </head>

    <body>
        <label id="from0">10</label>-<label id="to0">90</label>
        <div id="slider0" class="slider"></div>
    </body>

</html>

It says i can call split on line 15, on the values: … line 🙁 Anyone have a clue?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should be using .html() and not .val()

    $(".slider").slider(
{
 range: true,
 values: [ $("#label_"+this.id.split("slider_")[1]).html(), $("#label_"+this.id.split("slider_")[1]).html() ],
 ...

    But it might be better to just add your label value into the <div> like this:

    <div id="slider_18056" class="slider" data-value="10"></div>

    Then you can access it with $(this).attr('data-value')

    I don’t know what slider plugin you are using, but it seems like it wouldn’t be able to determine what this you want in the options. You could try this method instead:

    $(document).ready(function(){
  $(".slider").each(function(){
    $(this).slider({
      range: true,
      min: 0,
      max: 100,
      values: [parseInt($("#from"+(this.id).split("slider")[1]).text()), parseInt($("#to"+(this.id).split("slider")[1]).text())],
      slide: function( event, ui ) {
        $("#from"+this.id.split("slider")[1]).text(ui.values[0]);
        $("#to"+this.id.split("slider")[1]).text(ui.values[1]);
      }
    });
  });
});
    • 0