~keith-hughitt/helioviewer.org/2.0

<p>The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.</p>

<p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

</p>

<ul>

<li><b>ui.handle</b>: DOMElement - the current focused handle

<li><b>ui.value</b>: Integer - the current handle's value

</ul>

</div>

<h3>Dependencies</h3>

<ul>

</ul>

</div>

<h3>Example</h3>

<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>

A simple jQuery UI Slider.<br />

</p>

<pre>$("#slider").slider();

</pre>

</p>

<html>

<head>

#slider { margin: 10px; }

</style>

$(document).ready(function(){

$("#slider").slider();

});

</script>

</head>

</body>

</html>

</pre>

</p><p></div>

</div>

<h2 class="top-header">Options</h2>

<h3 class="option-name"><a href="#option-animate">animate</a></h3>

<dl>

<dd class="option-type">Boolean</dd>

<dt class="option-default-label">Default:</dt>

<dd class="option-default">false</dd>

</dl>

</div>

<p>Whether to slide handle smoothly when user click outside handle on the bar.</p>

</div>

<h4>Code examples</h4>

<dt>

Initialize a slider with the <code>animate</code> option specified.

</dt>

<dd>

<pre><code>$('.selector').slider({ animate: true });</code></pre>

</dd>

<dt>

Get or set the <code>animate</code> option, after init.

</dt>

100

<dd>

101

<pre><code>//getter

102

var animate = $('.selector').slider('option', 'animate');

103

//setter

104

$('.selector').slider('option', 'animate', true);</code></pre>

105

</dd>

106

107

</dl>

108

</div>

109

</li>

110

111

112

113

114

115

<dl>

116

117

<dd class="option-type">Number</dd>

118

119

<dt class="option-default-label">Default:</dt>

120

121

122

</dl>

123

</div>

124

125

<p>The maximum value of the slider.</p>

126

</div>

127

128

<h4>Code examples</h4>

129

130

131

<dt>

132

Initialize a slider with the <code>max</code> option specified.

133

</dt>

134

<dd>

135

<pre><code>$('.selector').slider({ max: 7 });</code></pre>

136

</dd>

137

138

139

<dt>

140

Get or set the <code>max</code> option, after init.

141

</dt>

142

<dd>

143

<pre><code>//getter

144

var max = $('.selector').slider('option', 'max');

145

//setter

146

$('.selector').slider('option', 'max', 7);</code></pre>

147

</dd>

148

149

</dl>

150

</div>

151

</li>

152

153

154

155

156

157

<dl>

158

159

<dd class="option-type">Number</dd>

160

161

<dt class="option-default-label">Default:</dt>

162

163

164

</dl>

165

</div>

166

167

<p>The minimum value of the slider.</p>

168

</div>

169

170

<h4>Code examples</h4>

171

172

173

<dt>

174

Initialize a slider with the <code>min</code> option specified.

175

</dt>

176

<dd>

177

<pre><code>$('.selector').slider({ min: -7 });</code></pre>

178

</dd>

179

180

181

<dt>

182

Get or set the <code>min</code> option, after init.

183

</dt>

184

<dd>

185

<pre><code>//getter

186

var min = $('.selector').slider('option', 'min');

187

//setter

188

$('.selector').slider('option', 'min', -7);</code></pre>

189

</dd>

190

191

</dl>

192

</div>

193

</li>

194

195

196

197

198

<h3 class="option-name"><a href="#option-orientation">orientation</a></h3>

199

<dl>

200

201

<dd class="option-type">String</dd>

202

203

<dt class="option-default-label">Default:</dt>

204

205

206

</dl>

207

</div>

208

209

<p>Normally you don't need to set this option because the plugin detects the slider orientation automatically. If the orientation is not correctly detected you can set this option to 'horizontal' or 'vertical'.</p>

210

</div>

211

212

<h4>Code examples</h4>

213

214

215

<dt>

216

Initialize a slider with the <code>orientation</code> option specified.

217

</dt>

218

<dd>

219

<pre><code>$('.selector').slider({ orientation: 'vertical' });</code></pre>

220

</dd>

221

222

223

<dt>

224

Get or set the <code>orientation</code> option, after init.

225

</dt>

226

<dd>

227

<pre><code>//getter

228

var orientation = $('.selector').slider('option', 'orientation');

229

//setter

230

$('.selector').slider('option', 'orientation', 'vertical');</code></pre>

231

</dd>

232

233

</dl>

234

</div>

235

</li>

236

237

238

239

240

<h3 class="option-name"><a href="#option-range">range</a></h3>

241

<dl>

242

243

<dd class="option-type">Boolean, String</dd>

244

245

<dt class="option-default-label">Default:</dt>

246

<dd class="option-default">false</dd>

247

248

</dl>

249

</div>

250

251

<p>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.</p>

252

</div>

253

254

<h4>Code examples</h4>

255

256

257

<dt>

258

Initialize a slider with the <code>range</code> option specified.

259

</dt>

260

<dd>

261

<pre><code>$('.selector').slider({ range: 'min' });</code></pre>

262

</dd>

263

264

265

<dt>

266

Get or set the <code>range</code> option, after init.

267

</dt>

268

<dd>

269

<pre><code>//getter

270

var range = $('.selector').slider('option', 'range');

271

//setter

272

$('.selector').slider('option', 'range', 'min');</code></pre>

273

</dd>

274

275

</dl>

276

</div>

277

</li>

278

279

280

281

282

283

<dl>

284

285

<dd class="option-type">Number</dd>

286

287

<dt class="option-default-label">Default:</dt>

288

289

290

</dl>

291

</div>

292

293

<p>Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.</p>

294

</div>

295

296

<h4>Code examples</h4>

297

298

299

<dt>

300

Initialize a slider with the <code>step</code> option specified.

301

</dt>

302

<dd>

303

<pre><code>$('.selector').slider({ step: 5 });</code></pre>

304

</dd>

305

306

307

<dt>

308

Get or set the <code>step</code> option, after init.

309

</dt>

310

<dd>

311

<pre><code>//getter

312

var step = $('.selector').slider('option', 'step');

313

//setter

314

$('.selector').slider('option', 'step', 5);</code></pre>

315

</dd>

316

317

</dl>

318

</div>

319

</li>

320

321

322

323

324

<h3 class="option-name"><a href="#option-value">value</a></h3>

325

<dl>

326

327

<dd class="option-type">Number</dd>

328

329

<dt class="option-default-label">Default:</dt>

330

331

332

</dl>

333

</div>

334

335

<p>Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.</p>

336

</div>

337

338

<h4>Code examples</h4>

339

340

341

<dt>

342

Initialize a slider with the <code>value</code> option specified.

343

</dt>

344

<dd>

345

<pre><code>$('.selector').slider({ value: 37 });</code></pre>

346

</dd>

347

348

349

<dt>

350

Get or set the <code>value</code> option, after init.

351

</dt>

352

<dd>

353

<pre><code>//getter

354

var value = $('.selector').slider('option', 'value');

355

//setter

356

$('.selector').slider('option', 'value', 37);</code></pre>

357

</dd>

358

359

</dl>

360

</div>

361

</li>

362

363

364

365

366

<h3 class="option-name"><a href="#option-values">values</a></h3>

367

<dl>

368

369

<dd class="option-type">Array</dd>

370

371

<dt class="option-default-label">Default:</dt>

372

373

374

</dl>

375

</div>

376

377

<p>This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.</p>

378

</div>

379

380

<h4>Code examples</h4>

381

382

383

<dt>

384

Initialize a slider with the <code>values</code> option specified.

385

</dt>

386

<dd>

387

<pre><code>$('.selector').slider({ values: [1,5,9] });</code></pre>

388

</dd>

389

390

391

<dt>

392

Get or set the <code>values</code> option, after init.

393

</dt>

394

<dd>

395

<pre><code>//getter

396

var values = $('.selector').slider('option', 'values');

397

//setter

398

$('.selector').slider('option', 'values', [1,5,9]);</code></pre>

399

</dd>

400

401

</dl>

402

</div>

403

</li>

404

405

</ul>

406

</div>

407

408

<h2 class="top-header">Events</h2>

409

410

411

412

413

<h3 class="event-name"><a href="#event-start">start</a></h3>

414

<dl>

415

416

<dd class="event-type">slidestart</dd>

417

</dl>

418

</div>

419

420

<p>This event is triggered when the user starts sliding.</p>

421

</div>

422

423

<h4>Code examples</h4>

424

425

426

<dt>

427

Supply a callback function to handle the <code>start</code> event as an init option.

428

</dt>

429

<dd>

430

<pre><code>$('.selector').slider({

431

start: function(event, ui) { ... }

432

});</code></pre>

433

</dd>

434

435

436

<dt>

437

Bind to the <code>start</code> event by type: <code>slidestart</code>.

438

</dt>

439

<dd>

440

<pre><code>$('.selector').bind('slidestart', function(event, ui) {

441

...

442

});</code></pre>

443

</dd>

444

445

</dl>

446

</div>

447

</li>

448

449

450

451

452

<h3 class="event-name"><a href="#event-slide">slide</a></h3>

453

<dl>

454

455

<dd class="event-type">slide</dd>

456

</dl>

457

</div>

458

459

<p>This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.

460

</p><p>Return false in order to prevent a slide, based on ui.value.</p>

461

</div>

462

463

<h4>Code examples</h4>

464

465

466

<dt>

467

Supply a callback function to handle the <code>slide</code> event as an init option.

468

</dt>

469

<dd>

470

<pre><code>$('.selector').slider({

471

slide: function(event, ui) { ... }

472

});</code></pre>

473

</dd>

474

475

476

<dt>

477

Bind to the <code>slide</code> event by type: <code>slide</code>.

478

</dt>

479

<dd>

480

<pre><code>$('.selector').bind('slide', function(event, ui) {

481

...

482

});</code></pre>

483

</dd>

484

485

</dl>

486

</div>

487

</li>

488

489

490

491

492

<h3 class="event-name"><a href="#event-change">change</a></h3>

493

<dl>

494

495

<dd class="event-type">slidechange</dd>

496

</dl>

497

</div>

498

499

<p>This event is triggered on slide stop, or if the value is changed programmatically (by the <code>value</code> method). Takes arguments event and ui. Use event.orginalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.</p>

500

</div>

501

502

<h4>Code examples</h4>

503

504

505

<dt>

506

Supply a callback function to handle the <code>change</code> event as an init option.

507

</dt>

508

<dd>

509

<pre><code>$('.selector').slider({

510

change: function(event, ui) { ... }

511

});</code></pre>

512

</dd>

513

514

515

<dt>

516

Bind to the <code>change</code> event by type: <code>slidechange</code>.

517

</dt>

518

<dd>

519

<pre><code>$('.selector').bind('slidechange', function(event, ui) {

520

...

521

});</code></pre>

522

</dd>

523

524

</dl>

525

</div>

526

</li>

527

528

529

530

531

532

<dl>

533

534

<dd class="event-type">slidestop</dd>

535

</dl>

536

</div>

537

538

<p>This event is triggered when the user stops sliding.</p>

539

</div>

540

541

<h4>Code examples</h4>

542

543

544

<dt>

545

Supply a callback function to handle the <code>stop</code> event as an init option.

546

</dt>

547

<dd>

548

<pre><code>$('.selector').slider({

549

stop: function(event, ui) { ... }

550

});</code></pre>

551

</dd>

552

553

554

<dt>

555

Bind to the <code>stop</code> event by type: <code>slidestop</code>.

556

</dt>

557

<dd>

558

<pre><code>$('.selector').bind('slidestop', function(event, ui) {

559

...

560

});</code></pre>

561

</dd>

562

563

</dl>

564

</div>

565

</li>

566

567

</ul>

568

</div>

569

570

<h2 class="top-header">Methods</h2>

571

572

573

574

575

<h3 class="method-name"><a href="#method-destroy">destroy</a></h3>

576

<dl>

577

<dt class="method-signature-label">Signature:</dt>

578

<dd class="method-signature">.slider( 'destroy'

579

580

581

582

583

584

585

586

)</dd>

587

</dl>

588

</div>

589

590

<p>Remove the slider functionality completely. This will return the element back to its pre-init state.</p>

591

</div>

592

</li>

593

594

595

596

597

<h3 class="method-name"><a href="#method-disable">disable</a></h3>

598

<dl>

599

<dt class="method-signature-label">Signature:</dt>

600

<dd class="method-signature">.slider( 'disable'

601

602

603

604

605

606

607

608

)</dd>

609

</dl>

610

</div>

611

612

<p>Disable the slider.</p>

613

</div>

614

</li>

615

616

617

618

619

<h3 class="method-name"><a href="#method-enable">enable</a></h3>

620

<dl>

621

<dt class="method-signature-label">Signature:</dt>

622

<dd class="method-signature">.slider( 'enable'

623

624

625

626

627

628

629

630

)</dd>

631

</dl>

632

</div>

633

634

<p>Enable the slider.</p>

635

</div>

636

</li>

637

638

639

640

641

<h3 class="method-name"><a href="#method-option">option</a></h3>

642

<dl>

643

<dt class="method-signature-label">Signature:</dt>

644

<dd class="method-signature">.slider( 'option'

645

646

, optionName

647

648

, <span class="optional">[</span>value<span class="optional">] </span>

649

650

651

652

)</dd>

653

</dl>

654

</div>

655

656

<p>Get or set any slider option. If no value is specified, will act as a getter.</p>

657

</div>

658

</li>

659

660

661

662

663

<h3 class="method-name"><a href="#method-value">value</a></h3>

664

<dl>

665

<dt class="method-signature-label">Signature:</dt>

666

<dd class="method-signature">.slider( 'value'

667

668

, <span class="optional">[</span>value<span class="optional">] </span>

669

670

671

672

673

674

)</dd>

675

</dl>

676

</div>

677

678

<p>Gets or sets the value of the slider. For single handle sliders.</p>

679

</div>

680

</li>

681

682

683

684

685

<h3 class="method-name"><a href="#method-values">values</a></h3>

686

<dl>

687

<dt class="method-signature-label">Signature:</dt>

688

<dd class="method-signature">.slider( 'values'

689

690

, index

691

692

, <span class="optional">[</span>value<span class="optional">] </span>

693

694

695

696

)</dd>

697

</dl>

698

</div>

699

700

<p>Gets or sets the values of the slider. For multiple handle or range sliders.</p>

701

</div>

702

</li>

703

704

</ul>

705

</div>

706

707

<h2 class="top-header">Theming</h2>

708

<p>The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

709

</p>

710

<p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.

711

</p>

712

713

<h3>Sample markup with jQuery UI CSS Framework classes</h3>

714

<div class="ui-slider<strong> ui-slider-horizontal</strong> ui-widget ui-widget-content ui-corner-all"><br />

715

   <a style="left: 0%;" class="<strong>ui-slider-handle</strong> ui-state-default ui-corner-all" href="#"></a><br />

716

</div><br />

717

718

719

Note: This is a sample of markup generated by the slider plugin, not markup you should use to create a slider. The only markup needed for that is <div><div>.

720

</strong>

721

</p>

722

723

</div>

724

</div>

725

726

</p><!--

727

Pre-expand include size: 30308 bytes

728

Post-expand include size: 46848 bytes

729

Template argument size: 25336 bytes

730

Maximum: 2097152 bytes

731

-->

732

733

Older »