Jquery UI-slider - FIlamentgroup - HELP

JavaScript
1

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/examples/slider_v2/index.php

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

please guide me with something or just a little help …

thanks

Regards

2

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.

3

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 ?

4

On the documentation page, go to the options section and investigate the range option.

5

I think you dont understand me what i mean …

this is the slider http://www.filamentgroup.com/examples/slider_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

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

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.


$( "#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.