> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/ios/ui-customization/thumbnail-slider-i.md). # Adding PDF page slider on iOS Explore the PTThumbnailSliderViewController class for efficient document navigation. Learn how to set up and customize thumbnail sliders with ease. Enhance user experience with this powerful tool. The The [`PTThumbnailSliderViewController`](https://sdk.apryse.com/api/ios/Classes/PTThumbnailSliderViewController.html) class allows the user to quickly navigate through a document. When using the slider control, a small page preview pop will be shown on top of the thumbnail slider. Note: If you are using the new UI, we recommend the `PTDocumentSliderViewController` class, which displays a scroll indicator for the current scroll position and allows the user to quickly skip through pages. ![](https://4149080208-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgY6xtY9ZQd9XMpvWlGM0%2Fuploads%2Fgit-blob-f9febe07a85d44675b5ad03e550640c736bf7123%2Fd737ad4d9851f59b5429599867cdb1e68b062fc8-750x615.png?alt=media) *The thumbnail slider control is part of the Tools library, so make sure you have* [*added the Tools library to your project*](/ios/ui-customization/setup.md)*.* ## Show a thumbnail slider To create and set up a thumbnail slider, supply a `PTPDFViewCtrl` instance to the `PTThumbnailSliderViewController` designated initializer: {% tabs %} {% tab title="Swift" %} {% code lineNumbers="true" %} ```swift let thumbnailSlider = PTThumbnailSliderViewController(pdfViewCtrl: pdfViewCtrl) // Set the current view controller as the thumbnail slider's delegate. thumbnailSlider.delegate = self // Set up view controller containment. self.addChild(thumbnailSlider) self.view.addSubview(thumbnailSlider.view) // Position thumbnail slider view in superview. thumbnailSlider.view.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ thumbnailSlider.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor), thumbnailSlider.view.widthAnchor.constraint(equalTo: self.view.widthAnchor), thumbnailSlider.view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor) ]) thumbnailSlider.didMove(toParent: self) ``` {% endcode %} {% endtab %} {% tab title="Obj-C" %} {% code lineNumbers="true" %} ```objc PTThumbnailSliderViewController *thumbnailSlider = [[PTThumbnailSliderViewController alloc] initWithPDFViewCtrl:pdfViewCtrl]; // Set the current view controller as the thumbnail slider's delegate. thumbnailSlider.delegate = self; // Set up view controller containment. [self addChildViewController:thumbnailSlider]; [self.view addSubView:thumbnailSlider.view]; // Position thumbnail slider view in superview. thumbnailSlider.view.translatesAutoresizingMaskIntoConstraints = NO; [NSLayoutConstraint activateConstraints:@[ [thumbnailSlider.view.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor], [thumbnailSlider.view.widthAnchor constraintEqualToAnchor:self.view.widthAnchor], [thumbnailSlider.view.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor], ]]; [thumbnailSlider didMoveToParentViewController:self]; ``` {% endcode %} {% endtab %} {% endtabs %} ## Populate with thumbnail images The thumbnail images shown in the thumbnail slider view controller are generated by the `GetThumbAsync:` method of the `PTPDFViewCtrl` class. When ready, the thumbnail images are provided to the `pdfviewCtrl`'s delegate via the `pdfViewCtrl:gotThumbAsync:thumbImage:` method. In your class adopting the `PTPDFViewCtrlDelegate` protocol (usually the same view controller containing the thumbnail slider view controller), add the following: {% tabs %} {% tab title="Swift" %} {% code lineNumbers="true" %} ```swift func pdfViewCtrl(_ pdfViewCtrl: PTPDFViewCtrl!, gotThumbAsync page_num: Int32, thumbImage image: UIImage!) { self.thumbnailSlider.setThumbnail(image, forPage: page_num) } ``` {% endcode %} {% endtab %} {% tab title="Obj-C" %} {% code lineNumbers="true" %} ```objc - (void)pdfViewCtrl:(PTPDFViewCtrl *)pdfViewCtrl gotThumbAsync:(int)page_num thumbImage:(UIImage*)image { if (!image) return; [self.thumbnailSlider setThumbnail:image forPage:page_num]; } ``` {% endcode %} {% endtab %} {% endtabs %} ## Customization The [`PTThumbnailSliderViewController`](https://sdk.apryse.com/api/ios/Classes/PTThumbnailSliderViewController.html) provides a flexible API for displaying buttons on either side of the slider control. This is possible with the following properties: * [`leadingToolbarItem`](https://sdk.apryse.com/api/ios/Classes/PTThumbnailSliderViewController.html#/c:objc\(cs\)PTThumbnailSliderViewController\(py\)leadingToolbarItem) - a single `UIBarButtonItem` to the left of the slider. * [`leadingToolbarItems`](https://sdk.apryse.com/api/ios/Classes/PTThumbnailSliderViewController.html#/c:objc\(cs\)PTThumbnailSliderViewController\(py\)leadingToolbarItems) - an array of `UIBarButtonItem`s to the left of the slider. * [`trailingToolbarItem`](https://sdk.apryse.com/api/ios/Classes/PTThumbnailSliderViewController.html#/c:objc\(cs\)PTThumbnailSliderViewController\(py\)trailingToolbarItem) - a single `UIBarButtonItem` to the right of the slider. * [`trailingToolbarItems`](https://sdk.apryse.com/api/ios/Classes/PTThumbnailSliderViewController.html#/c:objc\(cs\)PTThumbnailSliderViewController\(py\)trailingToolbarItems) - an array of `UIBarButtonItem`s to the right of the slider. It is also possible to remove these buttons by setting the appropriate property to nil. For example, to show a button to present a [`PTThumbnailsViewController`](https://sdk.apryse.com/api/ios/Classes/PTThumbnailsViewController.html) on the left of the slider, and a button to present a [`PTNavigationListsViewController`](https://sdk.apryse.com/api/ios/Classes/PTNavigationListsViewController.html) on the right: {% tabs %} {% tab title="Swift" %} {% code lineNumbers="true" %} ```swift // add a custom UIBarButtonItem to the left of the thumbnail slider let leftButton = UIBarButtonItem(image: UIImage(named: "icon.png"), style: .plain, target: self, action: #selector(performAction)) thumbnailSlider.leadingToolbarItem = leftButton // add an array of UIBarButtonItems to the right of the slider let rightButton1 = UIBarButtonItem(image: UIImage(named: "icon1.png"), style: .plain, target: self, action: #selector(performAction1)) let rightButton2 = UIBarButtonItem(image: UIImage(named: "icon2.png"), style: .plain, target: self, action: #selector(performAction2)) thumbnailSlider.trailingToolbarItems = [rightButton1, rightButton2] // To remove all buttons from the left of the slider, set the leadingToolbarItems property to nil: thumbnailSlider.leadingToolbarItems = nil ``` {% endcode %} {% endtab %} {% tab title="Obj-C" %} {% code lineNumbers="true" %} ```objc // add a custom UIBarButtonItem to the left of the thumbnail slider UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"icon.png"] style:UIBarButtonItemStylePlain target:self action:@selector(performAction)]; thumbnailSlider.leadingToolbarItem = leftButton; // add an array of UIBarButtonItems to the right of the slider UIBarButtonItem *rightButton1 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"icon1.png"] style:UIBarButtonItemStylePlain target:self action:@selector(performAction1)]; UIBarButtonItem *rightButton2 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"icon2.png"] style:UIBarButtonItemStylePlain target:self action:@selector(performAction2)]; thumbnailSlider.trailingToolbarItems = @[rightButton1, rightButton2]; // To remove all buttons from the left of the slider, set the leadingToolbarItems property to nil: thumbnailSlider.leadingToolbarItems = nil; ``` {% endcode %} {% endtab %} {% endtabs %} ## The thumbnail slider delegate The `PTThumbnailSliderViewDelegate` protocol allows the adopting class (usually the containing view controller, as in this guide) to be notified when the user is actively using the thumbnail slider. The thumbnail slider already handles changing the current page in response to user actions, but the delegate methods can be used to hide or show other content as appropriate. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.apryse.com/ios/ui-customization/thumbnail-slider-i.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.