SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Jquery UI-slider - FIlamentgroup - HELP

    Hi All
    Im noob in JS and i have a few question about Filamanetgroup Jquery UI - slider ...
    I try a few things to make it work but no effect ...

    OK , lets start ...

    this is the slider http://www.filamentgroup.com/example...r_v2/index.php

    i want to modify it to fill with color just like this one

    http://jqueryui.com/demos/slider/#rangemin

    please guide me with something or just a little help ..

    thanks

    Regards

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Inspect the rendered element and you'll find that all sorts of css styles are applied.

    For example, you can apply a color to .ui.widget.header to color the start of the slider.
    That's what I'm seeing on the jQuery slider page anyway, so whether this helps on your own page is up for grabs.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I try to apply css but the slider dont call the widget-header ... he dont have this method at all ...

    chek the attachments ...

    The problem is that I dont know how to add this method

    Can you help me with something ?
    Attached Images Attached Images

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by techcntrl View Post
    The problem is that I dont know how to add this method
    On the documentation page, go to the options section and investigate the range option.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you dont understand me what i mean ..

    this is the slider http://www.filamentgroup.com/example...r_v2/index.php
    that I want to use ...

    these are the options :

    *labels: Number, number of labels to show. Labels are shown in even distribution from the center of the slider. Default is 3.

    *tooltip: Boolean, show tooltips or not. Default is true.

    *tooltipSrc: Specific String, tooltip text source from select menu. Available values are "value" or "text". Default is "text".

    *labelSrc: Specific String, scale label text source from select menu. Available values are "value" or "text". Default is "value".

    *sliderOptions: Object, accepts native jQuery UI slider options. Note:This plugin generates some of the native slider options. For the plugin to work as shown, do not override these options: step, min, max, range, slide, and values.

    even if i change the options that i need .. there is no such div that creates me the background color of slider ... "ui-widget-header" is missing at all ..

    Regards

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by techcntrl View Post
    I think you dont understand me what i mean ..
    Did you even read the "range" documentation?

    Here - I'll quote the range description here for you, and mark in bold a few parts for you to pay special attention to.

    If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max
    Quote Originally Posted by techcntrl View Post
    there is no such div that creates me the background color of slider ... "ui-widget-header" is missing at all ..
    You know the slider that you want to emulate, the with the left part using a nice background color? This is the scripting code that they use to create it.

    Pay special attention to the range option.

    Code javascript:
    $( "#slider-range-min" ).slider({
    	range: "min",
    	value: 37,
    	min: 1,
    	max: 700,
    	slide: function( event, ui ) {
    		$( "#amount" ).val( "$" + ui.value );
    	}
    });

    I hope that I have been clear enough here to get the message across. That being, the option called range is the solution to your situation.

    If you are using some other plugin that uses slider, and that plugin does not work properly when you change the range setting, then that plugin is broken and needs to be either updated, or replaced with something else.
    Last edited by paul_wilkins; Dec 19, 2010 at 05:33.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •